/**
 * bootsass:normal — SHARED BASE for the new landing layouts.
 * Scoped under .ms-sdc. Type scale, margins and inner widths mirror the AI design
 * at the AI breakpoints (720 / 1040 / 1280).
 *
 * PADDING: top/bottom band padding is left ENTIRELY to the paragraph's own padding
 * fields / .padding-25 utility on the outer wrapper (you control it there). The
 * component only adds horizontal gutters, and removes the DUPLICATE top/bottom
 * padding that .padding-25 also applies to the .ms-sdc root (so your field value
 * isn't counted twice).
 *
 * Lists badge with an absolute ::before (NOT grid on the <li>) so the editor's
 * "<li><strong>Lead</strong> text</li>" never wraps into the badge column.
 *
 * Display = Recoleta. Body sans DEFAULT = Archivo. Mulish is OPT-IN: it only
 * applies on pages whose <body> carries the `font-mulish` class (see below).
 * One font per family — no fallback stacks. Headings use !important because the
 * theme !importants h1/h2/h3.
 */
/* Mulish — self-hosted (SIL OFL). Files in bootsass/fonts/Mulish/. Only 400 + 700
   are used (Recoleta covers the 600 display weights). Loaded lazily: fetched only
   when an element resolves to 'Mulish' — i.e. under .font-mulish. */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../../fonts/Mulish/Mulish-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../../fonts/Mulish/Mulish-Bold.woff2') format('woff2');
}

/* ---------- Tokens (scoped) ---------- */
.ms-sdc {
  --ms-petrol: #007375;
  --ms-petrol-deep: #00585a;
  --ms-petrol-ink: #013e40;
  --ms-teal-light: #6fc3c1;
  --ms-tint: #eaf3f1;
  --ms-ink: #202a2a;
  --ms-ink-soft: #4c5959;
  --ms-ink-faint: #7c8888;
  --ms-hair: #e3e0d9;
  --ms-hair-tint: #cfe2e0;
  --ms-display: 'Recoleta';
  --ms-sans: 'Archivo';   /* default; Mulish only under .font-mulish */

  font-family: var(--ms-sans);
  font-size: 17px;            /* body size: 16 ≤420 · 17 base (421–719) · 18 ≥720 */
  line-height: 1.72;          /* 1.74 ≥720 */
  font-weight: 400;
  font-style: normal;
  letter-spacing: normal;
  word-spacing: normal;
  color: var(--ms-ink);
  text-align: left;
  /* Global font rendering — MUST match the AI body or Mulish looks heavier/different. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}
.ms-sdc, .ms-sdc * { box-sizing: border-box; }

/* ---------- Mulish opt-in ----------
   Mulish is the classic light-LP body font. It is NOT the default. Add the
   `font-mulish` class to the page <body> (same field the lp-* body classes use)
   to switch that page's SDC bands back to Mulish. One lever: everything reads
   var(--ms-sans), so flipping the token here re-fonts the whole page.
   (0,2,0) beats the base .ms-sdc (0,1,0) token. */
.font-mulish .ms-sdc { --ms-sans: 'Mulish'; }

/* ---------- Horizontal gutters only (= AI .band side padding) ---------- */
.ms-sdc { padding-left: 24px; padding-right: 24px; }
/* Kill ONLY the duplicate top/bottom padding that .padding-25 puts on the root
   (it is also on the outer .paragraph, which is where you control top/bottom). */
.ms-sdc.ms-sdc { padding-top: 0 !important; padding-bottom: 0 !important; }

/* ---------- Centred reading column (= AI .band-in) ---------- */
.ms-sdc__inner { max-width: 432px; margin: 0 auto; }

/* ---------- Eyebrow label (h4) ---------- */
.ms-sdc h4 {
  font-family: var(--ms-sans) !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  line-height: 1.4 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--ms-petrol) !important;
  margin: 0 0 14px !important;
}

/* ---------- Section heading (h2) + divider ---------- */
.ms-sdc h2 {
  font-family: var(--ms-display) !important;
  font-weight: 600 !important;
  font-size: 27px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.005em !important;
  color: var(--ms-ink) !important;
  margin: 0 0 26px !important;
  text-wrap: balance;
}
.ms-sdc h2::after {
  content: ""; display: block; width: 38px; height: 2px;
  background: var(--ms-petrol); margin: 16px 0 0;
}

/* ---------- Sub-heading (h3) ---------- */
.ms-sdc h3 {
  font-family: var(--ms-sans) !important;
  font-weight: 700 !important;
  font-size: 19px !important;
  line-height: 1.3 !important;
  letter-spacing: 0.004em !important;
  color: var(--ms-petrol) !important;
  margin: 30px 0 12px !important;
}

/* ---------- Small meta / caption (h5) ---------- */
.ms-sdc h5 {
  font-family: var(--ms-sans); font-weight: 400; font-size: 12px;
  line-height: 1.45; color: var(--ms-ink-faint); margin: 11px 0;
}

/* ---------- Body text ---------- */
.ms-sdc p {
  font-family: var(--ms-sans); font-size: 17px; line-height: 1.72;
  color: var(--ms-ink); margin: 0 0 19px;
}
.ms-sdc p:last-child { margin-bottom: 0; }
.ms-sdc strong { font-weight: 700; color: inherit; }
.ms-sdc a { color: var(--ms-petrol); }
.ms-sdc a:hover { color: #00A194; }

/* first-p-large: enlarge the first paragraph of the body (AI "lead": 18.5 → 21px) */
.ms-sdc.first-p-large .ms-sdc__body > p:first-child { font-size: 18.5px; }

.ms-sdc__header > :first-child,
.ms-sdc__body > :first-child,
.ms-sdc__copy > :first-child { margin-top: 0; }

/* ---------- Media ---------- */
.ms-sdc__media { margin: 26px 0; overflow: hidden; }
.ms-sdc__media picture { display: block; }
.ms-sdc__media img { display: block; width: 100%; height: auto; }

/* ---------- Default ordered list = numbered steps ---------- */
.ms-sdc.ms-sdc ol { list-style: none; counter-reset: msstep; padding: 0; margin: 24px 0 4px; }
.ms-sdc.ms-sdc ol > li {
  counter-increment: msstep; position: relative;
  padding: 20px 0 20px 54px; margin: 0; border-top: 1px solid var(--ms-hair);
  font-family: var(--ms-sans); font-size: 16px; line-height: 1.55; color: var(--ms-ink-soft);
}
.ms-sdc.ms-sdc ol > li:last-child { border-bottom: 1px solid var(--ms-hair); }
.ms-sdc.ms-sdc ol > li::before {
  content: counter(msstep); position: absolute; left: 0; top: 20px;
  width: 34px; height: 34px; border-radius: 50%; background: var(--ms-petrol); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ms-display); font-weight: 600; font-size: 16px;
}
.ms-sdc.ms-sdc ol > li strong { color: var(--ms-ink); }

/* ---------- Default unordered list = bullets ---------- */
.ms-sdc.ms-sdc ul { padding-left: 20px; margin: 18px 0; }
.ms-sdc.ms-sdc ul > li { margin-bottom: 8px; color: var(--ms-ink); }

/* ---------- Default blockquote = pull quote ---------- */
.ms-sdc blockquote {
  font-style: normal; border: 0; border-left: 3px solid var(--ms-petrol);
  border-radius: 0; padding: 0 0 0 18px; margin: 30px 0 4px; background: transparent;
}
.ms-sdc blockquote p {
  font-family: var(--ms-display); font-weight: 400; font-size: 22px; line-height: 1.4;
  color: var(--ms-petrol-ink); margin: 0;
}

/* ====================================================================
   FLAG STYLES — absolute ::before badges (robust to <strong> + text nodes)
   ==================================================================== */

/* cards-list: ordered list as numbered cards (01 …) */
.ms-sdc.cards-list ol {
  list-style: none; counter-reset: mscard; padding: 0; margin: 24px 0 28px;
  display: grid; grid-template-columns: 1fr; gap: 14px;
}
.ms-sdc.cards-list ol > li {
  counter-increment: mscard; position: relative;
  background: #fff; border: 0; border-radius: 14px; padding: 22px 22px 22px 80px; margin: 0;
  box-shadow: 0 1px 2px rgba(1,62,64,0.05), 0 12px 30px -22px rgba(1,62,64,0.35);
  font-family: var(--ms-sans); font-size: 15px; line-height: 1.62; color: var(--ms-ink-soft);
}
.ms-sdc.cards-list ol > li::before {
  content: counter(mscard, decimal-leading-zero); position: absolute; left: 20px; top: 22px;
  width: 44px; height: 44px; border-radius: 50%; background: var(--ms-tint); color: var(--ms-petrol-deep);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ms-display); font-weight: 600; font-size: 18px;
}
.ms-sdc.cards-list ol > li strong {
  display: block; color: var(--ms-petrol); font-size: 17px; line-height: 1.3; margin: 7px 0 8px;
}

/* check-list: ✓ items */
.ms-sdc.check-list ul {
  list-style: none; padding: 0; margin: 28px 0 4px; display: flex; flex-direction: column; gap: 15px;
}
.ms-sdc.check-list ul > li {
  position: relative; padding-left: 37px; margin: 0;
  font-size: 15.5px; line-height: 1.5; color: var(--ms-ink);
}
.ms-sdc.check-list ul > li::before {
  content: "\2713"; position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid rgba(111,195,193,0.6); color: var(--ms-teal-light);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
}

/* x-list: ✕ rows (two columns on tablet+) */
.ms-sdc.x-list ul { list-style: none; padding: 0; margin: 22px 0 4px; }
.ms-sdc.x-list ul > li {
  position: relative; padding: 16px 0 16px 40px; margin: 0; border-top: 1px solid var(--ms-hair-tint);
  font-size: 15.5px; line-height: 1.55; color: var(--ms-ink-soft);
}
.ms-sdc.x-list ul > li:last-child { border-bottom: 1px solid var(--ms-hair-tint); }
.ms-sdc.x-list ul > li strong { color: var(--ms-ink); }
.ms-sdc.x-list ul > li::before {
  content: "\2715"; position: absolute; left: 0; top: 15px;
  width: 26px; height: 26px; border-radius: 7px; background: #fff; color: #a85a5a;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
  box-shadow: 0 1px 2px rgba(1,62,64,0.06);
}

/* quote-green: blockquote as the filled petrol callout box */
.ms-sdc.quote-green blockquote {
  background: var(--ms-petrol); color: #fff; border: 0; border-radius: 16px;
  padding: 24px 22px; margin: 28px 0;
}
.ms-sdc.quote-green blockquote p {
  font-family: var(--ms-sans); font-size: 15.5px; line-height: 1.6; color: rgba(255,255,255,0.9); margin: 0;
}
.ms-sdc.quote-green blockquote p:first-child {
  color: var(--ms-teal-light); text-transform: uppercase; letter-spacing: 0.15em;
  font-size: 11.5px; font-weight: 700; margin-bottom: 10px;
}
.ms-sdc.quote-green blockquote p strong { color: #fff; }

/* ====================================================================
   CTA — field_simple_link with .arrow-link
   ==================================================================== */
.ms-sdc__actions { margin-top: 22px; }
.ms-sdc__link, .ms-sdc .type-link { margin: 0; }
.ms-sdc a.arrow-link, .ms-sdc .arrow-link.btn {
  display: flex; align-items: center; gap: 14px; width: 100%;
  background: transparent !important; border: 0 !important;
  border-top: 1px solid var(--ms-hair) !important; border-radius: 0 !important;
  padding: 22px 0 0 !important; margin: 0 !important; box-shadow: none !important;
  color: var(--ms-petrol) !important;
  font-family: var(--ms-display) !important; font-weight: 500 !important;
  font-size: 19px !important; line-height: 1.3 !important; text-align: left; white-space: normal;
}
.no-margin .ms-sdc__actions {
	margin-top: 0 !important;
	padding-top: 30px;
}
.ms-sdc a.arrow-link::after {
  content: "\2192"; flex: none; width: 42px; height: 42px; border-radius: 50%;
  background: var(--ms-petrol); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 18px; transition: transform 0.2s ease;
}
.ms-sdc a.arrow-link:hover { color: var(--ms-petrol) !important; }
.ms-sdc a.arrow-link:hover::after { transform: translateX(4px); }

/* ====================================================================
   ON-DARK — light text for petrol bands
   ==================================================================== */
.ms-sdc.on-dark { color: rgba(255,255,255,0.82); }
.ms-sdc.on-dark p { color: rgba(255,255,255,0.82); }
.ms-sdc.on-dark h2 { color: #fff !important; }
.ms-sdc.on-dark h2::after { background: var(--ms-teal-light); }
.ms-sdc.on-dark h3 { color: var(--ms-teal-light) !important; }
.ms-sdc.on-dark h4 { color: var(--ms-teal-light) !important; }
.ms-sdc.on-dark h5 { color: rgba(255,255,255,0.55); }
.ms-sdc.on-dark strong { color: #fff; }
.ms-sdc.on-dark.check-list ul > li { color: rgba(255,255,255,0.9); }
.ms-sdc.on-dark blockquote p { color: var(--ms-teal-light); }
.ms-sdc.on-dark a.arrow-link, .ms-sdc.on-dark .arrow-link.btn {
  color: #fff !important; border-top-color: rgba(255,255,255,0.22) !important;
}
.ms-sdc.on-dark a.arrow-link:hover { color: #fff !important; }
.ms-sdc.on-dark a.arrow-link::after { background: #fff; color: var(--ms-petrol); }

/* ====================================================================
   RESPONSIVE — AI breakpoints (420 / 720 / 1040 / 1280)
   Only horizontal gutters + inner width change here; top/bottom padding
   stays under your padding fields.
   ==================================================================== */
@media (max-width: 420px) {
  .ms-sdc { font-size: 16px; padding-left: 20px; padding-right: 20px; }
  .ms-sdc p { font-size: 16px; }
}

@media (min-width: 720px) {
  .ms-sdc { font-size: 18px; line-height: 1.74; padding-left: 48px; padding-right: 48px; }
  .ms-sdc__inner { max-width: 720px; }

  .ms-sdc h4 { font-size: 12px !important; margin-bottom: 18px !important; }
  .ms-sdc h2 { font-size: 37px !important; margin-bottom: 30px !important; }
  .ms-sdc h2::after { width: 46px; }
  .ms-sdc h3 { font-size: 23px !important; margin-top: 36px !important; }
  .ms-sdc h5 { font-size: 13px; margin: 13px 0; }
  .ms-sdc p { font-size: 18px; line-height: 1.74; }
  .ms-sdc.first-p-large .ms-sdc__body > p:first-child { font-size: 21px; }

  .ms-sdc.ms-sdc ol > li { font-size: 17px; padding: 22px 0 22px 54px; }
  .ms-sdc.ms-sdc ol > li::before { top: 22px; }

  .ms-sdc.cards-list ol { grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
  .ms-sdc.cards-list ol > li { padding: 28px 26px 28px 86px; font-size: 15.5px; }
  .ms-sdc.cards-list ol > li::before { left: 26px; top: 28px; }
  .ms-sdc.cards-list ol > li strong { font-size: 18px; }

  .ms-sdc.check-list ul { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; }
  .ms-sdc.check-list ul > li { font-size: 16.5px; }

  .ms-sdc.x-list ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
  .ms-sdc.x-list ul > li { font-size: 16.5px; }
  .ms-sdc.x-list ul > li:nth-child(2) { border-top: 1px solid var(--ms-hair-tint); }

  .ms-sdc.quote-green blockquote { padding: 32px 30px; margin: 34px 0; }
  .ms-sdc.quote-green blockquote p { font-size: 17px; }

  .ms-sdc blockquote { padding-left: 22px; margin: 36px 0 6px; }
  .ms-sdc blockquote p { font-size: 27px; line-height: 1.38; }

  .ms-sdc a.arrow-link, .ms-sdc .arrow-link.btn { font-size: 23px !important; }
  .ms-sdc a.arrow-link::after { width: 48px; height: 48px; }
}

@media (min-width: 1040px) {
  .ms-sdc { padding-left: 56px; padding-right: 56px; }
  .ms-sdc__inner { max-width: 760px; }
  .ms-sdc h2 { font-size: 42px !important; }
  .ms-sdc.cards-list ol { gap: 22px; }
}

@media (min-width: 1280px) {
  .ms-sdc { padding-left: 64px; padding-right: 64px; }
}

/* ====================================================================
   ANIMATION — scroll progress bar + reveal-on-scroll
   ==================================================================== */
#ms-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--ms-petrol, #007375); z-index: 1100;
  transition: width 0.08s linear; pointer-events: none;
}
.ms-sdc .reveal { transition: opacity 0.6s ease, transform 0.6s ease; }
body.ms-anim .ms-sdc .reveal { opacity: 0; transform: translateY(20px); }
body.ms-anim .ms-sdc .reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  body.ms-anim .ms-sdc .reveal { opacity: 1; transform: none; transition: none; }
}
@media print { body.ms-anim .ms-sdc .reveal { opacity: 1; transform: none; } }

/* check-chips: <ul> as a single-column list with round mint ✓ chips.
   Dark/mint context (pair with on-dark). Absolute ::before, never grid,
   so "<li><strong>x</strong> text</li>" never wraps into the badge column.
   Reusable by any layout; placed after the base list rules so it wins on
   the equal-specificity tie (same pattern as check-list / x-list). */
.ms-sdc.check-chips ul{ list-style:none; padding:0; margin:0 0 30px; }
.ms-sdc.check-chips ul > li{
  position:relative; padding-left:36px; min-height:23px; margin-bottom:13px;
  color:#EAF5F5; font-size:16px; line-height:1.45;
}
.ms-sdc.check-chips ul > li::before{
  content:"\2713"; position:absolute; left:0; top:1px;
  width:23px; height:23px; border-radius:50%;
  background:rgba(143,224,216,0.16); color:#8FE0D8;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; font-size:12px; line-height:1;
}
@media (max-width:860px){
  .ms-sdc.check-chips ul > li{ font-size:15px; margin-bottom:10px; }
}

/* ====================================================================
   dark-confirm: dark/centred restyle of `normal` for confirmation pages.
   Pair with `on-dark steps-card` + body.ratgeber.danke chrome.
   Self-contained; zero effect on other `normal` bands. Breakpoint 600.
   ==================================================================== */
.ms-sdc--normal.dark-confirm { font-family: 'Archivo'; }
.ms-sdc--normal.dark-confirm .ms-sdc__inner { max-width: 600px; text-align: center; }

/* ✓ success medallion (CSS-drawn; editors can't author SVG) */
.ms-sdc--normal.dark-confirm .ms-sdc__body::before {
  content: ""; display: block; width: 80px; height: 80px; margin: 0 auto 26px;
  border-radius: 50%; border: 1.5px solid rgba(143,224,216,0.4);
  background: rgba(143,224,216,0.14)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 38' fill='none'%3E%3Cpath d='M9 19.5l7 7 13-15' stroke='%238FE0D8' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 38px no-repeat;
  animation: ms-danke-pop .5s cubic-bezier(.2,.8,.3,1.2) both;
}
@keyframes ms-danke-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* eyebrow (h4 / mark) — Archivo 600, mint, 2px tracking */
.ms-sdc--normal.dark-confirm h4,
.ms-sdc--normal.dark-confirm mark.marker-yellow {
  font-family: 'Archivo' !important; color: #8FE0D8 !important;
  background: none; display: block;
  font-weight: 600 !important; font-size: 12.5px !important;
  letter-spacing: 2px !important; line-height: 1.4 !important;
  text-transform: uppercase !important; margin-bottom: 16px !important;
}

/* title (h2) — white Recoleta 36, no petrol divider */
.ms-sdc--normal.dark-confirm h2 {
  font-family: var(--ms-display) !important; font-weight: 700 !important;
  color: #fff !important; font-size: 36px !important; line-height: 1.18 !important;
  letter-spacing: -0.3px !important; margin-bottom: 16px !important; text-align: center;
}
.ms-sdc--normal.dark-confirm h2::after { display: none !important; }

/* lead = first body <p>; note = last body <p> */
.ms-sdc--normal.dark-confirm .ms-sdc__body > p { font-family: 'Archivo'; color: #CFE6E6; }
.ms-sdc--normal.dark-confirm .ms-sdc__body > p:first-of-type {
  font-size: 17px; line-height: 1.6; margin-bottom: 8px;
}
.ms-sdc--normal.dark-confirm .ms-sdc__body > p:last-of-type {
  font-size: 13.5px; line-height: 1.55; color: #9FC4C4; margin: 0;
}

/* mint link (plain <a> on dark would inherit petrol) */
.ms-sdc--normal.dark-confirm a { color: #8FE0D8; font-weight: 600; text-decoration: none; }
.ms-sdc--normal.dark-confirm a:hover { color: #fff; }

@media (max-width: 600px) {
  .ms-sdc--normal.dark-confirm h2 { font-size: 28px !important; }
  .ms-sdc--normal.dark-confirm .ms-sdc__body > p:first-of-type { font-size: 15.5px; }
}
/* ====================================================================
   steps-card: <h3> + <ol> render as ONE dark glass card.
   The <h3> (typed directly above the <ol>) = card top; the <ol> = card
   body. Mint round number badges. Absolute ::before, never grid (KB).
   Appended AFTER the base ol rules so it wins the specificity ties,
   incl. the base :last-child bottom-border. Reusable on any layout.
   Contract: in a steps-card band the <h3> is the card title and must
   sit directly above the <ol>.
   ==================================================================== */

/* card TOP = the heading */
.ms-sdc.steps-card h3 {
  font-family: var(--ms-display) !important; color: #fff !important;
  font-weight: 600 !important; font-size: 18px !important; line-height: 1.3 !important;
  text-align: left; margin: 30px 0 0 !important;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(143,224,216,0.18); border-bottom: 0;
  border-radius: 16px 16px 0 0; padding: 28px 28px 0;
}

/* card BODY = the list */
.ms-sdc.steps-card ol {
  list-style: none; counter-reset: msstep; text-align: left;
  margin: 0 0 30px; padding: 20px 28px 28px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(143,224,216,0.18); border-top: 0;
  border-radius: 0 0 16px 16px;
}
.ms-sdc.steps-card ol > li {
  counter-increment: msstep; position: relative; border: 0;
  padding: 0 0 0 42px; margin: 0 0 18px;
  font-family: 'Archivo';
  font-size: 15.5px; line-height: 1.55; color: #EAF5F5;
}
.ms-sdc.steps-card ol > li:last-child { margin-bottom: 0; border: 0; } /* kills inherited bottom-border */
.ms-sdc.steps-card ol > li::before {
  content: counter(msstep); position: absolute; left: 0; top: 1px;
  width: 28px; height: 28px; border-radius: 50%;
  background: #8FE0D8; color: #07303C;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Archivo'; font-weight: 700; font-size: 14px; line-height: 1;
}
.ms-sdc.steps-card ol > li strong { color: #fff; font-weight: 700; }

@media (max-width: 600px) {
  .ms-sdc.steps-card h3 { padding: 22px 22px 0; }
  .ms-sdc.steps-card ol  { padding: 20px 22px 22px; }
}

/* ====================================================================
   THANK-YOU / ONBOARDING dark-system flags (Archivo + Recoleta).
   Built for Checkout_thankyou.html (KB §18). All generic + reusable.
   Page breakpoint = 820 (this page's own value). Embeds (Vimeo /
   Calendly) are pasted as <iframe> into field_body (source editing) —
   `video-frame` and `embed-card` style any iframe in the band.
   ==================================================================== */

/* --------------------------------------------------------------------
   hero-centered: dark, centred welcome hero. ✓ check-badge medallion
   (reuses the ms-danke-pop keyframe), white Recoleta h1 with an <em>
   mint-italic highlight, muted lead (first <p>) + small caption (last
   <p>). Pair with `on-dark`. Reusable for any dark confirmation hero.
   -------------------------------------------------------------------- */
.ms-sdc--normal.hero-centered { font-family: 'Archivo'; }
.ms-sdc--normal.hero-centered .ms-sdc__inner { max-width: 760px; text-align: center; }

.ms-sdc--normal.hero-centered .ms-sdc__body::before {
  content: ""; display: block; width: 62px; height: 62px; margin: 0 auto 22px;
  border-radius: 50%; border: 1.5px solid rgba(143,224,216,0.4);
  background: rgba(143,224,216,0.15)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 38' fill='none'%3E%3Cpath d='M9 19.5l7 7 13-15' stroke='%238FE0D8' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 30px no-repeat;
  animation: ms-danke-pop .5s cubic-bezier(.2,.8,.3,1.2) both;
}

/* h1 — white Recoleta; <em> inside h1 = mint italic highlight */
.ms-sdc--normal.hero-centered h1 {
  font-family: var(--ms-display) !important; font-weight: 700 !important;
  color: #fff !important; font-size: 38px !important; line-height: 1.18 !important;
  letter-spacing: -0.3px !important; margin: 0 0 14px !important; text-align: center; padding: 0 30px;
}
.ms-sdc--normal.hero-centered h1 em {
  color: #8FE0D8; font-style: italic; font-weight: 600; font-family: var(--ms-display);
}

/* lead = first body <p>; caption = last body <p> (sits after the iframe) */
.ms-sdc--normal.hero-centered .ms-sdc__body > p {
  font-family: 'Archivo'; color: #D8ECEC;
}
.ms-sdc--normal.hero-centered .ms-sdc__body > p:first-of-type {
  font-size: 18px; line-height: 1.6; max-width: 600px; margin: 0 auto;
}
.ms-sdc--normal.hero-centered .ms-sdc__body > p:last-of-type {
  font-size: 13px; line-height: 1.45; color: #9FC4C4; margin: 14px auto 0;
}
@media (max-width: 820px) {
  .ms-sdc--normal.hero-centered h1 { font-size: 30px !important; }
}

/* --------------------------------------------------------------------
   video-frame: any <iframe> in the band → responsive 16:9, dark frame.
   No wrapper div needed (uses aspect-ratio). Reusable: Vimeo/YouTube.
   -------------------------------------------------------------------- */
.ms-sdc.video-frame iframe {
  display: block; width: 100%; max-width: 760px; aspect-ratio: 16 / 9; height: auto;
  margin: 36px auto 0; border: 1px solid rgba(143,224,216,0.25); border-radius: 18px;
  background: #06262F; box-shadow: 0 18px 50px rgba(0,0,0,0.35);
}

/* --------------------------------------------------------------------
   centered: generic — centre the column + text, drop the h2 divider.
   Colour/font-agnostic, works light or dark. Reusable anywhere.
   -------------------------------------------------------------------- */
.ms-sdc.centered .ms-sdc__inner { text-align: center; }
.ms-sdc.centered h2::after { display: none !important; }

/* --------------------------------------------------------------------
   steps-grid: <ol> → 3 light cards (1-col ≤820), centred, circle number
   badge on TOP; <strong> = card title, trailing text = description.
   Also sets the band's Archivo type + light header look (teal eyebrow,
   ink Recoleta h2 30px, muted intro). Distinct from `cards-list`
   (2-col, badge on the left). Reusable for any "how it works" row.
   -------------------------------------------------------------------- */
.ms-sdc--normal.steps-grid { font-family: 'Archivo'; }
.ms-sdc--normal.steps-grid .ms-sdc__inner { max-width: 1040px; }

.ms-sdc--normal.steps-grid h4,
.ms-sdc--normal.steps-grid mark.marker-yellow {
  font-family: 'Archivo' !important; color: #007474 !important;
  background: none; display: block;
  font-weight: 600 !important; font-size: 12.5px !important; letter-spacing: 2px !important;
  text-transform: uppercase !important; line-height: 1.4 !important; margin: 0 0 14px !important;
}
.ms-sdc--normal.steps-grid h2 {
  font-family: var(--ms-display) !important; font-weight: 700 !important; color: #243238 !important;
  font-size: 30px !important; line-height: 1.18 !important; letter-spacing: -0.3px !important;
  margin: 0 0 10px !important;
}
.ms-sdc--normal.steps-grid .ms-sdc__body > p {
  font-family: 'Archivo'; color: #5C7B80; font-size: 17px;
  max-width: 620px; margin: 0 auto 40px;
}

/* the 3-card grid (double .ms-sdc to beat the base ol rules cleanly) */
.ms-sdc.ms-sdc.steps-grid ol {
  list-style: none; counter-reset: msstep; padding: 0; margin: 0 0 44px;
  display: grid; grid-template-columns: repeat(3,1fr); gap: 18px;
}
.ms-sdc.ms-sdc.steps-grid ol > li {
  counter-increment: msstep; position: relative; border: 1px solid #E2EDED;
  background: #fff; border-radius: 16px; padding: 26px 22px; margin: 0;
  text-align: center; font-family: 'Archivo';
  font-size: 14px; line-height: 1.5; color: #5C7B80;
}
.ms-sdc.ms-sdc.steps-grid ol > li::before {
  content: counter(msstep); position: static; display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin: 0 auto 14px; border-radius: 50%;
  background: #F4F8F8; color: #007474; border: 1.5px solid #D6EFEC;
  font-family: var(--ms-display); font-weight: 600; font-size: 17px;
}
.ms-sdc.ms-sdc.steps-grid ol > li strong {
  display: block; color: #243238; font-weight: 700; font-size: 17px; line-height: 1.3; margin: 0 0 6px;
}
@media (max-width: 820px) {
  .ms-sdc--normal.steps-grid h2 { font-size: 25px !important; }
  .ms-sdc.ms-sdc.steps-grid ol { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------
   embed-card: a tall embed → the AI white "ty-cal" card (reproduced 1:1).
   The editor pastes `<div class="ty-cal">` wrapping EITHER Calendly's
   inline-widget (`<div class="calendly-inline-widget">` + its own
   `<script>`, format permits it) OR a plain `<iframe>` (restricted-format
   fallback). The card frame is the `.ty-cal` wrapper; the widget / iframe
   inside just fills it (rounded 12). Reusable for Calendly/forms/maps.
   -------------------------------------------------------------------- */
.ms-sdc.embed-card .ty-cal {
	max-width: 760px;
	margin: 0 auto;
	background: #fafafa;
	border: 5px solid #fff;
	border-radius: 18px;
	padding: 8px;
	overflow: hidden;
	padding-bottom: 40px;
}
.ms-sdc.embed-card .ty-cal .calendly-inline-widget { border-radius: 12px; }
.ms-sdc.embed-card .ty-cal iframe {
  display: block; width: 100%; min-height: 700px; border: 0; border-radius: 12px;
}
@media (max-width: 820px) {
  .ms-sdc.embed-card .ty-cal { padding: 4px; }
}

/* --------------------------------------------------------------------
   facts-row: <ul> → inline, centred, wrapping fact chips with emoji.
   Petrol bold labels, no bullets. Reusable for any trust/fact strip.
   -------------------------------------------------------------------- */
.ms-sdc--normal.facts-row { font-family: 'Archivo'; }
.ms-sdc--normal.facts-row .ms-sdc__inner { max-width: 860px; }
.ms-sdc.ms-sdc.facts-row ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: 30px; justify-content: center; flex-wrap: wrap;
}
.ms-sdc.ms-sdc.facts-row ul > li {
  display: flex; align-items: center; gap: 10px; margin: 0;
  color: #0B3C49; font-size: 15px; font-weight: 600; line-height: 1.4;
}

/* ====================================================================
   PORTRAIT PAGE flags (Pascal Bartosch, KB §19). Archivo + Recoleta
   dark/light system, breakpoint 820. `timeline`, `final-cta` are dark
   (own their gradient + vertical padding; editor sets padding fields = 0
   + field_background_color #07303C). `quote-gold`, `icon-cards`,
   `contact-cards` are light (bg + padding via the paragraph fields).
   All pair with `centered` (header centring + h2-divider removal) except
   `contact-cards`, which rides the hero `founder` flag.
   ==================================================================== */

/* Shared light header (teal Archivo eyebrow + petrol Recoleta h2 33) */
.ms-sdc--normal.quote-gold,
.ms-sdc--normal.icon-cards { font-family: 'Archivo'; }
/* This page uses constant 24px gutters + its own column widths (AI .narrow
   760 / .wrap 1080) — override the base 720/1040/1280 gutters + inner widths
   so tablet/desktop match the 820 system (not the standard-page 720/1040). */
.ms-sdc--normal.quote-gold,
.ms-sdc--normal.icon-cards { padding-left: 24px !important; padding-right: 24px !important; }
.ms-sdc--normal.quote-gold .ms-sdc__inner { max-width: 760px; }
.ms-sdc--normal.icon-cards .ms-sdc__inner { max-width: 1080px; }
.ms-sdc--normal.quote-gold h4,
.ms-sdc--normal.icon-cards h4,
.ms-sdc--normal.quote-gold mark.marker-yellow,
.ms-sdc--normal.icon-cards mark.marker-yellow {
  font-family: 'Archivo' !important; color: #007474 !important; background: none;display: block;
  font-weight: 600 !important; font-size: 12.5px !important; letter-spacing: 2px !important;
  text-transform: uppercase !important; line-height: 1.4 !important; margin: 0 0 14px !important;
}
.ms-sdc--normal.quote-gold h2,
.ms-sdc--normal.icon-cards h2 {
  font-family: var(--ms-display) !important; font-weight: 700 !important; color: #0B3C49 !important;
  font-size: 33px !important; line-height: 1.18 !important; letter-spacing: -0.3px !important;
  margin: 0 0 14px !important;
}
@media (max-width: 820px) {
  .ms-sdc--normal.quote-gold h2,
  .ms-sdc--normal.icon-cards h2 { font-size: 27px !important; }
}

/* --------------------------------------------------------------------
   timeline: dark milestone list (pair `on-dark centered timeline`).
   Header centred; each milestone = <h3> with a leading <strong>YEAR</strong>
   (rendered as the mint year-pill) + white Recoleta title, then a muted <p>
   description indented to sit under the title. Owns its gradient + padding.
   -------------------------------------------------------------------- */
.ms-sdc--normal.timeline{
  font-family: 'Archivo';
  background: linear-gradient(160deg, #07303C, #0B3C49 60%, #0A5E66);
  padding-left: 24px !important; padding-right: 24px !important;
}
.ms-sdc.ms-sdc.timeline{ padding-top: 72px !important; padding-bottom: 72px !important; }
.ms-sdc--normal.timeline .ms-sdc__inner{ max-width: 760px; }
/* header */
.ms-sdc--normal.timeline h4, .ms-sdc--normal.timeline mark.marker-yellow {
  font-family: 'Archivo' !important; color: #8FE0D8 !important;background: none;display: block;
  font-weight: 600 !important; font-size: 12.5px !important; letter-spacing: 2px !important;
  text-transform: uppercase !important; line-height: 1.4 !important; margin: 0 0 14px !important;
}
.ms-sdc--normal.timeline h2{
  font-family: var(--ms-display) !important; font-weight: 700 !important; color: #fff !important;
  font-size: 33px !important; line-height: 1.18 !important; letter-spacing: -0.3px !important;
  margin: 0 0 14px !important;
}
.ms-sdc--normal.timeline .ms-sdc__body > p:first-of-type{
  font-family: 'Archivo'; color: #D8ECEC; font-size: 19px; line-height: 1.6;
  max-width: 680px; margin: 0 auto; text-align: center;
}
/* milestone title (h3 = pill + title) */
.ms-sdc--normal.timeline .ms-sdc__body h3{
  display: flex; align-items: flex-start; gap: 20px; text-align: left;
  font-family: var(--ms-display) !important; font-weight: 700 !important; color: #fff !important;
  font-size: 20px !important; line-height: 1.3 !important; letter-spacing: -0.3px !important;
  margin: 32px 0 6px !important;
}
.ms-sdc--normal.timeline .ms-sdc__body h3 strong{
  flex: none; min-width: 82px; padding: 14px 12px; border-radius: 999px; line-height: 1;
  background: rgba(143,224,216,0.14); border: 1px solid rgba(143,224,216,0.35); color: #8FE0D8;
  font-family: var(--ms-display); font-weight: 700; font-size: 16px; text-align: center;
}
/* milestone description */
.ms-sdc--normal.timeline .ms-sdc__body h3 + p{
  color: #D8ECEC; font-size: 18px; line-height: 1.6; text-align: left; margin: -20px 0 0 102px;
}
@media (max-width: 820px){
  .ms-sdc.ms-sdc.timeline{ padding-top: 54px !important; padding-bottom: 54px !important; }
  .ms-sdc--normal.timeline h2{ font-size: 27px !important; }
  .ms-sdc--normal.timeline .ms-sdc__body h3{ gap: 14px; }
  .ms-sdc--normal.timeline .ms-sdc__body h3 + p{ margin: 0px 0 0 96px; }
}

/* --------------------------------------------------------------------
   quote-gold: white pull-quote card, gold left border, Recoleta italic;
   last <p> inside = byline (Archivo, non-italic, muted). Pair `centered`.
   -------------------------------------------------------------------- */
.ms-sdc--normal.quote-gold .ms-sdc__body > p:first-of-type{
  font-family: 'Archivo'; color: #243238; font-size: 19px; line-height: 1.6;
  max-width: 680px; margin: 0 auto; text-align: center;
}
.ms-sdc--normal.quote-gold blockquote{
  background: #fff; border: 0; border-left: 4px solid #F2C14E; border-radius: 0 14px 14px 0;
  padding: 24px 28px; margin: 40px auto 0; max-width: 680px; text-align: left;
}
.ms-sdc--normal.quote-gold blockquote p{
  font-family: var(--ms-display); font-style: italic; font-weight: 400; color: #0B3C49;
  font-size: 19px; line-height: 1.6; margin: 0 0 14px;
}
.ms-sdc--normal.quote-gold blockquote p:last-child{
  font-family: 'Archivo'; font-style: normal; color: #5C7B80;
  font-size: 15px; line-height: 1.5; margin: 14px 0 0;
}

/* --------------------------------------------------------------------
   icon-cards: <ul> → 2-col white cards (1-col ≤820), left-aligned; each
   <li> starts with a typed emoji + a petrol <strong> lead-in. Pair `centered`.
   Doubled .ms-sdc.ms-sdc to beat the base ul rules cleanly.
   -------------------------------------------------------------------- */
.ms-sdc.ms-sdc.icon-cards ul{
  list-style: none; padding: 0; margin: 40px 0 0;
  display: grid; grid-template-columns: repeat(2,1fr); gap: 16px;
}
.ms-sdc.ms-sdc.icon-cards ul > li{
  background: #fff; border: 1px solid #E2EDED; border-radius: 14px; margin: 0;
  /* Hanging indent = fake icon column: the typed leading emoji hangs in a 30px
     left slot; wrapped body lines align in the right column (can't flex/grid the
     <li> — that would split the <strong>+text into extra columns). */
  padding: 20px 22px 20px 52px; text-indent: -30px;
  font-family: 'Archivo'; font-size: 18px; line-height: 1.6; color: #243238; text-align: left;
}
.ms-sdc.ms-sdc.icon-cards ul > li strong{ color: #0B3C49; font-weight: 700; }
@media (max-width: 820px){
  .ms-sdc.ms-sdc.icon-cards ul{ grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------
   contact-cards: <ul> → stacked white cards; each <li>'s leading <strong>
   becomes the uppercase teal card label (block), rest = value; mailto teal.
   Rides the hero `founder` band (S6). Doubled .ms-sdc.ms-sdc to beat base ul.
   -------------------------------------------------------------------- */
.ms-sdc.ms-sdc.contact-cards ul{ list-style: none; padding: 0; margin: 24px 0 0; }
.ms-sdc.ms-sdc.contact-cards ul > li{
  background: #fff; border: 1px solid #E2EDED; border-radius: 18px; padding: 24px 26px; margin: 0 0 16px;
  font-family: 'Archivo'; font-size: 18px; line-height: 1.5; color: #243238;
}
.ms-sdc.ms-sdc.contact-cards ul > li:last-child{ margin-bottom: 0; }
.ms-sdc.contact-cards ul > li strong{
  display: block; font-family: 'Archivo'; font-weight: 700; font-size: 14px;
  letter-spacing: 1px; text-transform: uppercase; color: #007474; margin: 0 0 8px;
}
.ms-sdc.contact-cards ul > li a{
  color: #007474; text-decoration: none; border-bottom: 1px solid rgba(0,116,116,0.3);
}

/* --------------------------------------------------------------------
   final-cta: dark centred CTA band (pair `on-dark centered final-cta`).
   Two Simple Link anchors keyed by field_css_tag: a.cta-gold (gold fill)
   + a.cta-ghost (outline). Owns its gradient + vertical padding.
   -------------------------------------------------------------------- */
.ms-sdc--normal.final-cta{
  font-family: 'Archivo';
  background: linear-gradient(160deg, #07303C, #0A5E66);
  padding-left: 24px !important; padding-right: 24px !important;
}
.ms-sdc.ms-sdc.final-cta{ padding-top: 72px !important; padding-bottom: 72px !important; }
.ms-sdc--normal.final-cta .ms-sdc__inner{ max-width: 1080px; }
.ms-sdc--normal.final-cta h2{
  font-family: var(--ms-display) !important; font-weight: 700 !important; color: #fff !important;
  font-size: 34px !important; line-height: 1.18 !important; letter-spacing: -0.3px !important;
  margin: 0 0 16px !important;
}
.ms-sdc--normal.final-cta p{
  font-family: 'Archivo' !important; color: #D8ECEC !important;
  font-size: 18px !important; line-height: 1.6 !important; max-width: 600px; margin: 16px auto 0 !important; text-align: center;
}
/* CTA row = the two .ms-sdc__link wrappers */
.ms-sdc--normal.final-cta .ms-sdc__actions{
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 32px;
}
.ms-sdc--normal.final-cta .ms-sdc__link{ margin: 0; }
/* both buttons — reset to the AI btn base (beats theme .btn/.btn-lg/.btn-default) */
.ms-sdc.final-cta .ms-sdc__link a.simple-link{
  display: inline-block; font-family: 'Archivo' !important; font-weight: 700 !important;
  font-size: 17px !important; text-decoration: none !important; text-align: center;
  border-radius: 11px !important; padding: 17px 30px !important; margin: 0 !important;
  border: 1.5px solid transparent !important; box-shadow: none;
  transition: transform .12s, box-shadow .2s, background .15s, border-color .15s, color .15s;
}
/* gold */
.ms-sdc.final-cta a.cta-gold{
  background: #F2C14E !important; color: #07303C !important; border-color: #F2C14E !important;
  box-shadow: 0 6px 20px rgba(242,193,78,0.3) !important;
}
.ms-sdc.final-cta a.cta-gold:hover{
  background: #E0A92F !important; color: #07303C !important; transform: translateY(-1px);
  box-shadow: 0 9px 26px rgba(242,193,78,0.4) !important;
}
/* ghost */
.ms-sdc.final-cta .ms-sdc__link a.simple-link.cta-ghost{
  background: transparent !important; color: #fff !important; border-color: rgba(255,255,255,0.35) !important;
}
.ms-sdc.final-cta .ms-sdc__link a.simple-link.cta-ghost:hover{
  color: #8FE0D8 !important; border-color: #8FE0D8 !important; background: transparent !important;
}
@media (max-width: 820px){
  .ms-sdc.ms-sdc.final-cta{ padding-top: 54px !important; padding-bottom: 54px !important; }
  .ms-sdc--normal.final-cta h2{ font-size: 27px !important; }
}

/* --------------------------------------------------------------------
   highlight-box: a trailing <blockquote> in a dark band → mint-translucent
   rounded callout. First <p> = big Recoleta white; following <p> = small
   Archivo caption. Pair `on-dark centered timeline`. Placed after the
   on-dark blockquote rules so its (0,2,2) p rules win the source-order tie.
   -------------------------------------------------------------------- */
.ms-sdc--normal.highlight-box blockquote{
  background: rgba(143,224,216,0.10); border: 1px solid rgba(143,224,216,0.30);
  border-radius: 16px; padding: 26px 30px; margin: 36px auto 0; max-width: 760px; text-align: center;
}
.ms-sdc--normal.highlight-box blockquote p{
  font-family: var(--ms-display); font-weight: 600; font-style: normal; color: #fff;
  font-size: 20px; line-height: 1.4; margin: 0;
}
.ms-sdc--normal.highlight-box blockquote p + p{
  font-family: 'Archivo'; font-weight: 400; color: #C5DEDE;
  font-size: 15px; line-height: 1.5; margin: 10px 0 0;
}

/* --------------------------------------------------------------------
   wide-last: generic grid modifier — the last card of a 2-col grid list
   spans the full row. Reusable on any odd-count `icon-cards`/`steps-grid`.
   Doubled .ms-sdc.ms-sdc to match the icon-cards grid weight.
   -------------------------------------------------------------------- */
.ms-sdc.ms-sdc.wide-last ul > li:last-child{ grid-column: 1 / -1; }

/* ====================================================================
   GOOGLE-ADS LP "Gedankenkarussell endlich stoppen" — the gk-* flags.
   Source: google-ads-gedankenkarussell-stoppen-landingpage-v1.html
   Breakpoint: 900 ONLY (this page's own value).

   UNITS: px, NEVER rem. The AI page is authored in rem against a 16px root,
   but this site sets the 62.5% trick — **html font-size = 10px** — so every
   rem here would render at 62.5% of intended (h1 31px instead of 49.6px).
   The AI's rem values are therefore converted x16 into px (.7rem -> 11.2px,
   1.06rem -> 16.96px, clamp(2rem,4.6vw,3.1rem) -> clamp(32px,4.6vw,49.6px)).
   `em` and `vw` are unaffected. This is why the house type scale is all px.

   gk-hook / gk-rating / gk-rest are the three copy bands that sit INSIDE
   the dark rounded hero card. The card itself, and the desktop 2-column
   placement next to the webform, are page chrome (`body.lp-gk` in
   style.css) — a paragraph-level grid, because a webform can never live
   inside an SDC. These flags therefore drop the SDC's own horizontal
   gutter and reading-column cap: the grid owns the inset.
   ==================================================================== */
/* ---- FONTS: one lever, same trick as `font-mulish` -------------------
   The AI page's Georgia maps to our Recoleta, its system-sans to our Archivo
   (see CLAUDE.md §"HTML-font → house-font map"). `body.lp-gk` sets
   `--gk-display: 'Recoleta'` and `--gk-sans: 'Archivo'`; rather than restate
   font-family on every selector, remap the two tokens the component already
   reads here, so the whole band re-fonts from these two lines. The var()
   fallback keeps the flags reusable on any page without `lp-gk`. */
.ms-sdc--normal.gk-hook,
.ms-sdc--normal.gk-rating,
.ms-sdc--normal.gk-rest,
.ms-sdc--normal.gk-forwho{
  --ms-display: var(--gk-display, 'Recoleta');
  --ms-sans: var(--gk-sans, 'Archivo');
}

/* Kill the shared base's horizontal gutter on ALL FOUR gk bands. The base is
   24px, and — easy to miss — it grows to 56px at >=1040 (`@media (min-width:1040px)
   .ms-sdc{padding:0 56px}`, the standard 720/1040/1280 pages' gutter). This page
   is not on that scale: the AI's 24px wrap padding already lives on the grid
   container, so any SDC gutter is double-counting. Leaving it on gk-forwho cost
   the card grid 112px (892 instead of the AI's 940). */
.ms-sdc--normal.gk-hook,
.ms-sdc--normal.gk-rating,
.ms-sdc--normal.gk-rest,
.ms-sdc--normal.gk-forwho{
  padding-left: 0; padding-right: 0;
}
.ms-sdc--normal.gk-hook .ms-sdc__inner,
.ms-sdc--normal.gk-rating .ms-sdc__inner,
.ms-sdc--normal.gk-rest .ms-sdc__inner{ max-width: none; margin: 0; }

/* --------------------------------------------------------------------
   gk-hook: the hero hook — mint eyebrow (h4), Recoleta-italic mint
   kicker (h3), white Recoleta h1 + the gold rule (h1::after — the rule
   is decoration, not content), muted lead (p). Pair `on-dark`.
   -------------------------------------------------------------------- */
.ms-sdc--normal.gk-hook h4{
  font-family: var(--ms-sans) !important; font-weight: 700 !important;
  font-size: 11.2px !important; line-height: 1.6 !important;
  letter-spacing: .22em !important; text-transform: uppercase !important;
  color: #7FCFC0 !important; margin: 0 !important;
}
.ms-sdc--normal.gk-hook h3{
  font-family: var(--ms-display) !important; font-style: italic !important;
  font-weight: 400 !important; font-size: 17.92px !important; line-height: 1.4 !important;
  letter-spacing: normal !important; color: #7FCFC0 !important; margin: 14px 0 0 !important;
}
.ms-sdc--normal.gk-hook h1{
  font-family: var(--ms-display) !important; font-weight: 700 !important;
  font-size: clamp(32px, 4.6vw, 49.6px) !important; line-height: 1.18 !important;
  letter-spacing: -.01em !important; color: #fff !important;
  margin: 10px 0 0 !important; text-align: left !important;
}
/* the gold .rule — 60x4 under the headline */
.ms-sdc--normal.gk-hook h1::after{
  content: ""; display: block; width: 60px; height: 4px;
  background: #F0B93F; border-radius: 2px; margin: 22px 0;
}
.ms-sdc--normal.gk-hook p{
  color: #C9DBD9; font-size: 16.96px; line-height: 1.6; margin: 0 0 14px;
}
.ms-sdc--normal.gk-hook p:last-child{ margin-bottom: 0; }

/* --------------------------------------------------------------------
   gk-rating: the ★ rating line. <em> is the authorable hook for the
   stars (CKEditor italic) — reset to upright + gold, never italic.
   Pair `on-dark`.
   -------------------------------------------------------------------- */
.ms-sdc--normal.gk-rating p{
  color: #B9CFCD; font-size: 13.92px; line-height: 1.6; margin: 20px 0 0;
}
.ms-sdc--normal.gk-rating em{
  font-style: normal; color: #F0B93F; letter-spacing: 2px;
}
.ms-sdc--normal.gk-rating strong{ color: #fff; }
/* <mark> = the authorable hook for the AI's `.rating-long` span (" · Hervorragend"),
   which the AI DROPS on mobile to keep the line short. An editor cannot add a class,
   so <mark> carries it; reset its default yellow highlight and inherit everything. */
.ms-sdc--normal.gk-rating mark{
  background: none; color: inherit; font: inherit;
}

/* --------------------------------------------------------------------
   gk-rest: closing hero copy + <ul> → outlined pill badges (inline,
   wrapping). Distinct from `check-chips` (mint ✓, single column) and
   `facts-row` (light emoji chips). Pair `on-dark`.
   Doubled .ms-sdc.ms-sdc to beat the base list rules (0,2,1)/(0,2,2).
   -------------------------------------------------------------------- */
.ms-sdc--normal.gk-rest p{
  color: #C9DBD9; font-size: 16.96px; line-height: 1.6; margin: 0;
}
.ms-sdc.ms-sdc.gk-rest ul{
  list-style: none; padding: 0; margin: 26px 0 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.ms-sdc.ms-sdc.gk-rest ul > li{
  margin: 0; padding: 6px 13px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.26); color: #D6E6E4;
  font-size: 12px; line-height: 1.6;
}

/* --------------------------------------------------------------------
   gk-forwho: the light "Für wen" band — teal eyebrow + centred ink
   Recoleta h2, <ul> → 3-col soft cards (leading <strong> = serif card
   title, trailing text = description), trailing <p> = the centred note,
   and the gold Simple Link (a.cta-gold). Pair `centered`.
   Distinct from `icon-cards` (2-col, emoji, no card title font switch).
   -------------------------------------------------------------------- */
.ms-sdc--normal.gk-forwho .ms-sdc__inner{ max-width: 940px; }
.ms-sdc--normal.gk-forwho h4{
  font-family: var(--ms-sans) !important; font-weight: 700 !important;
  font-size: 11.2px !important; line-height: 1.6 !important;
  letter-spacing: .22em !important; text-transform: uppercase !important;
  color: #2E7F7B !important; margin: 0 !important;
}
.ms-sdc--normal.gk-forwho h2{
  font-family: var(--ms-display) !important; font-weight: 700 !important;
  font-size: clamp(24px, 3vw, 32.8px) !important; line-height: 1.25 !important;
  letter-spacing: normal !important; color: #0F3D45 !important;
  max-width: 620px; margin: 12px auto 32px !important;
  /* The base .ms-sdc h2 sets `text-wrap:balance`; the AI does not. This heading
     wraps to 2 lines in BOTH (the text is 666.6px in a 620px box), but balance
     evens the lines out ("Dieser Ratgeber ist / für dich, wenn du …") while the
     AI wraps greedily. Match the AI. */
  text-wrap: wrap;
}
/* the 6 cards */
.ms-sdc.ms-sdc.gk-forwho ul{
  list-style: none; padding: 0; margin: 0 auto; max-width: 940px; text-align: left;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.ms-sdc.ms-sdc.gk-forwho ul > li{
  margin: 0; padding: 20px; border-radius: 14px;
  background: #F1F6F5; border: 1px solid #DCE7E5;
  font-size: 13.6px; line-height: 1.6; color: #516B70;
}
.ms-sdc.ms-sdc.gk-forwho ul > li strong{
  display: block; font-family: var(--ms-display); font-weight: 700;
  font-size: 15.68px; line-height: 1.4; color: #0F3D45; margin: 0 0 7px;
}
/* the closing note */
.ms-sdc.ms-sdc.gk-forwho .ms-sdc__body > p{
  max-width: 680px; margin: 32px auto 0;
  font-size: 15.2px; line-height: 1.6; color: #44585E;
}
.ms-sdc.ms-sdc.gk-forwho .ms-sdc__body > p strong{ color: #0F3D45; }
/* the gold CTA — reset to the AI .fw-cta (beats theme .btn/.btn-default) */
.ms-sdc--normal.gk-forwho .ms-sdc__actions{
  display: flex; justify-content: center; margin-top: 24px;
}
.ms-sdc--normal.gk-forwho .ms-sdc__link{ margin: 0; }
.ms-sdc.gk-forwho .ms-sdc__link a.simple-link{
  display: inline-block; font-family: var(--ms-sans) !important; font-weight: 800 !important;
  font-size: 15.68px !important; line-height: 1.6 !important;
  text-decoration: none !important; text-align: center;
  border: none !important; border-radius: 10px !important;
  padding: 15px 34px !important; margin: 0 !important; box-shadow: none;
  transition: filter .15s;
}
.ms-sdc.gk-forwho a.cta-gold{
  background: #F0B93F !important; color: #0A2E35 !important;
}
.ms-sdc.gk-forwho a.cta-gold:hover{
  filter: brightness(1.06); color: #0A2E35 !important; background: #F0B93F !important;
}

/* ---------------- gk-* — mobile (the page's only breakpoint) --------- */
@media (max-width: 900px){
  .ms-sdc--normal.gk-hook h4{ font-size: 10.08px !important; letter-spacing: .18em !important; }
  .ms-sdc--normal.gk-hook h3{ font-size: 14.72px !important; line-height: 1.4 !important; margin: 7px 0 0 !important; }
  .ms-sdc--normal.gk-hook h1{ font-size: 29.12px !important; }
  .ms-sdc--normal.gk-hook h1::after{ width: 48px; height: 3px; margin: 12px 0; }
  .ms-sdc--normal.gk-hook p{ font-size: 15.52px; line-height: 1.55; margin-bottom: 0; }

  /* The AI centres the rating on mobile — not by intent but because its mobile
     `.grid` overrides only display/flex-direction/gap, so the desktop
     `align-items:center` survives into a flex COLUMN and centres on the
     horizontal axis. The short rating line shrinks to its content and lands
     centred; the taller bands fill the width and look unaffected. Reproduced
     here as text-align, which is what it renders as. */
  .ms-sdc--normal.gk-rating p{ font-size: 12.16px; color: #A9C6C3; margin: 14px 0 0; text-align: center; }
  /* the AI hides `.rating-long` (" · Hervorragend") here — the line has to stay short */
  .ms-sdc--normal.gk-rating mark{ display: none; }

  /* NOTE: gk-rest p is deliberately NOT resized here. The AI shrinks only
     `.hook .copy` on mobile (.97rem); `.rest .copy` keeps its 1.06rem/1.6.
     An earlier build applied the hook's mobile size to both and made this
     paragraph a step too small. */
  .ms-sdc.ms-sdc.gk-rest ul{ margin-top: 18px; }

  .ms-sdc.ms-sdc.gk-forwho ul{ grid-template-columns: 1fr; }
}

/* ====================================================================
   DANKE-SEITE „Gedankenkarussell stoppen" — gk-confirm / gk-nexthead /
   gk-meta.  Sibling of the four LP flags above: same campaign, same
   palette, same single 900px breakpoint.
   Source: Ratgeber-Gedankenkarussell-Dankeseite-v1.html
   Spec:   docs/Ratgeber_Gedankenkarussell_Danke_Mapping.md
   The page carries NO body class — header/footer are out of scope and
   both cards are painted by their own flag, so nothing is left for page
   chrome to do. (The LP needs `lp-gk` only because four paragraphs there
   share one card; here one paragraph = one card.)
   ==================================================================== */

/* Fonts for BOTH pages of this funnel map to house faces: the AI's Georgia →
   Recoleta, its system-sans → Archivo (see CLAUDE.md §"HTML-font → house-font
   map"). The LP ships them via `body.lp-gk`; this page has no body class, so the
   house faces ride the flags as the var() FALLBACK (`body.lp-gk` still wins where
   it exists). One font per token — no OS fonts, no fallback stacks. */
.ms-sdc--normal.gk-confirm,
.ms-sdc--normal.gk-nexthead,
.ms-sdc--normal.gk-meta{
  --ms-display: var(--gk-display, 'Recoleta');
  --ms-sans: var(--gk-sans, 'Archivo');
  font-family: var(--ms-sans);
}

/* Reproduce the AI's `.wrap` (max-width 1060, padding 0 24px). The base gutter
   is already 24px but GROWS to 56px at >=1040 (the standard 720/1040/1280
   pages' scale, which this page is not on). Pinning 24px keeps the card at the
   AI's 1012px content box between 1040 and ~1124 viewport, where the base would
   otherwise shave 32px off it. (0,2,0) beats the base (0,1,0) at any width.
   NB: this is the OPPOSITE of the LP flags, which zero the gutter — there the
   AI's 24px wrap padding lives on the `lp-gk` grid container instead. */
.ms-sdc--normal.gk-confirm,
.ms-sdc--normal.gk-nexthead,
.ms-sdc--normal.gk-meta{
  padding-left: 24px; padding-right: 24px;
}

/* --------------------------------------------------------------------
   gk-confirm: the confirmation band — a CONTAINED dark card (#0A2E35,
   radius 22) on the white page, not a full-bleed band. The card is
   painted on .ms-sdc__inner and the AI's 620 column on .ms-sdc__body:
   a 1:1 match for the source's `.hero > .inner`.
   ✓ medallion = .ms-sdc__body::before · gold rule = h1::after (the
   gk-hook technique) · mailbox note = <blockquote>. Pair `on-dark`.
   -------------------------------------------------------------------- */
.ms-sdc--normal.gk-confirm .ms-sdc__inner{
  max-width: 1012px; margin: 0 auto;
  background: #0A2E35; border-radius: 22px; padding: 52px 48px;
  position: relative; overflow: hidden; text-align: center;
}
/* the mint glow — AI: .hero::before */
.ms-sdc--normal.gk-confirm .ms-sdc__inner::before{
  content: ""; position: absolute; right: -120px; top: -80px;
  width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(127,207,192,.15), transparent 65%);
  pointer-events: none;
}
/* the AI's `.inner` — the 620 column, above the glow */
.ms-sdc--normal.gk-confirm .ms-sdc__body{
  position: relative; z-index: 1;
  max-width: 620px; margin: 0 auto; text-align: center;
}
/* the ✓ medallion. The tick is the AI's own stroke path (M20 6 9 17l-5-5,
   width 2.4, round caps) as a data-URI background so it is stroke-exact
   rather than a ✓ glyph. Masking the element would eat the circle + border,
   so the tick rides as background-image ON the circle. No `ms-danke-pop`
   here — unlike dark-confirm/hero-centered, the AI's tick is static. */
.ms-sdc--normal.gk-confirm .ms-sdc__body::before{
  content: ""; display: block; width: 62px; height: 62px; border-radius: 50%;
  margin: 0 auto 22px; border: 1.5px solid rgba(127,207,192,.5);
  /* The base's `.ms-sdc, .ms-sdc *` border-box does NOT reach generated content
     — `*` matches elements, not pseudo-elements, and box-sizing is not
     inherited. Without this the 1.5px border lands OUTSIDE the 62px and the
     medallion renders 65px, pushing the whole card 3px taller than the AI. */
  box-sizing: border-box;
  background: rgba(127,207,192,.14)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237FCFC0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
    center / 28px 28px no-repeat;
}
.ms-sdc--normal.gk-confirm h4{
  font-family: var(--ms-sans) !important; font-weight: 700 !important;
  font-size: 11.2px !important; line-height: 1.6 !important;
  letter-spacing: .22em !important; text-transform: uppercase !important;
  color: #7FCFC0 !important; margin: 0 !important;
}
.ms-sdc--normal.gk-confirm h1{
  font-family: var(--ms-display) !important; font-weight: 700 !important;
  font-size: clamp(30.4px, 4.2vw, 44.8px) !important; line-height: 1.2 !important;
  letter-spacing: -.01em !important; color: #fff !important;
  margin: 12px 0 0 !important; text-align: center !important;
}
/* the gold rule — decoration, not content (AI: .rule) */
.ms-sdc--normal.gk-confirm h1::after{
  content: ""; display: block; width: 60px; height: 4px;
  background: #F0B93F; border-radius: 2px; margin: 22px auto;
}
/* the lead. (0,4,1) beats `.ms-sdc.on-dark p` (0,2,1). */
.ms-sdc.ms-sdc.gk-confirm .ms-sdc__body > p{
  font-family: var(--ms-sans); color: #C9DBD9;
  font-size: 16.96px; line-height: 1.6; margin: 0;
}
/* the mailbox note (AI: .mailbox) — resets the base pull-quote look.
   The size lives on the box, as in the AI (`.mailbox{font-size:.92rem}`), so
   anything the editor adds inside inherits it rather than falling back to the
   base's 18px body size. The <p> rule below still has to restate it: the base
   `.ms-sdc blockquote p` (the pull-quote look) would otherwise win at 27px. */
.ms-sdc.ms-sdc.gk-confirm blockquote{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14); border-radius: 12px;
  padding: 16px 20px; margin: 26px 0 0; text-align: left; font-style: normal;
  font-family: var(--ms-sans); font-size: 14.72px; line-height: 1.6;
}
/* The AI is `display:flex; gap:13px` with the emoji in its own <span>. An
   editor types the emoji inline, so it hangs in the ~30px icon column via
   HANGING INDENT instead (emoji 16.8px + the 13px gap ~= 30px). Flex here
   would split <strong> + text into extra columns — the icon-cards lesson.
   Delta vs the AI: its first line starts at the full 30px; ours starts right
   after the emoji + space (~21px). Wrapped lines align in both. */
.ms-sdc.ms-sdc.gk-confirm blockquote p{
  font-family: var(--ms-sans); color: #C9DBD9;
  font-size: 14.72px; line-height: 1.6; margin: 0;
  padding-left: 30px; text-indent: -30px;
}
.ms-sdc.ms-sdc.gk-confirm blockquote strong{ color: #fff; font-weight: 700; }

/* --------------------------------------------------------------------
   gk-nexthead: the light centred band header (teal eyebrow, ink Recoleta
   h2, muted lead). Self-contained BY CHOICE: the live `gk-forwho` carries
   a near-identical header, but its inner is 940 (its card grid), its h2
   clamp differs and it has no lead <p> — and it is LIVE, so extracting a
   shared flag would mean editing it. Only the h4 is a true duplicate.
   Pair `centered` (which centres the column + drops the h2 divider).
   -------------------------------------------------------------------- */
.ms-sdc--normal.gk-nexthead .ms-sdc__inner{ max-width: 620px; }
.ms-sdc--normal.gk-nexthead h4{
  font-family: var(--ms-sans) !important; font-weight: 700 !important;
  font-size: 11.2px !important; line-height: 1.6 !important;
  letter-spacing: .22em !important; text-transform: uppercase !important;
  color: #2E7F7B !important; margin: 0 !important;
}
.ms-sdc--normal.gk-nexthead h2{
  font-family: var(--ms-display) !important; font-weight: 700 !important;
  font-size: clamp(23.2px, 3vw, 32px) !important; line-height: 1.25 !important;
  letter-spacing: normal !important; color: #0F3D45 !important;
  margin: 12px 0 10px !important;
  /* the base sets text-wrap:balance; the AI wraps greedily */
  text-wrap: wrap;
}
.ms-sdc.ms-sdc.gk-nexthead .ms-sdc__body > p{
  font-family: var(--ms-sans); color: #44585E;
  font-size: 16px; line-height: 1.6; margin: 0;
}
/* a real italic here — unlike gk-rating, where <em> is the star hook */
.ms-sdc--normal.gk-nexthead em{ font-style: italic; }

/* --------------------------------------------------------------------
   gk-meta: the trust row — <ul> → inline centred fact chips.
   <em> = the star hook (upright + gold, never italic — same convention as
   gk-rating), <strong> = the ink label. Distinct from `facts-row`
   (petrol labels, emoji, the other palette). Pair `centered`.
   -------------------------------------------------------------------- */
.ms-sdc--normal.gk-meta .ms-sdc__inner{ max-width: 760px; }
.ms-sdc.ms-sdc.gk-meta ul{
  list-style: none; padding: 0; margin: 0 auto; max-width: 760px;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 26px;
}
/* flex on the <li> is correct HERE (this is not the badge-list pattern): the
   AI's own `.meta span` is `display:flex; gap:6px`, and its children are
   exactly our <em>/<strong>/text nodes — same items, same 6px gap. */
.ms-sdc.ms-sdc.gk-meta ul > li{
  display: flex; align-items: center; gap: 6px;
  font-family: var(--ms-sans); font-size: 13.12px; line-height: 1.6;
  color: #5C7278; margin: 0; padding: 0;
}
.ms-sdc.ms-sdc.gk-meta ul > li::before{ content: none; display: none; }
.ms-sdc.ms-sdc.gk-meta ul > li strong{ color: #0F3D45; font-weight: 700; }
.ms-sdc.ms-sdc.gk-meta ul > li em{
  font-style: normal; color: #F0B93F; letter-spacing: 1px;
}

.ms-sdc.ms-sdc.gk-confirm blockquote p > strong:first-child {
	padding-left: 6px;
}


/* ---------- Danke-Seite — mobile (the page's only breakpoint) -------- */
@media (max-width: 900px){
  .ms-sdc--normal.gk-confirm .ms-sdc__inner{ padding: 36px 22px; border-radius: 18px; }
  .ms-sdc--normal.gk-confirm .ms-sdc__body::before{ width: 54px; height: 54px; margin-bottom: 18px; }
  .ms-sdc--normal.gk-confirm h1{ font-size: 28.48px !important; }
  .ms-sdc.ms-sdc.gk-confirm .ms-sdc__body > p{ font-size: 15.68px; }
  .ms-sdc.ms-sdc.gk-confirm blockquote{ padding: 14px 16px; margin-top: 22px; font-size: 13.6px; }
  .ms-sdc.ms-sdc.gk-confirm blockquote p{ font-size: 13.6px; }

  .ms-sdc.ms-sdc.gk-meta ul{ gap: 14px; }
  .ms-sdc.ms-sdc.gk-meta ul > li{ font-size: 12.48px; }
}

/* =====================================================================
   HOMEPAGE FLAGS (basic_page_container, body.lp-home). Source:
   homepage.html. Mapping: docs/Homepage_Mapping.md. Light Archivo+Recoleta.
   The AI CSS is authored in px (no rem) → values copy directly. All rules
   scoped under .ms-sdc / .ms-sdc--normal.<flag> or under .lp-home .ms-sdc.
   Appended last so equal-specificity ties win on source order.
   ===================================================================== */

/* ---------- Page-scope resets (body.lp-home) — styles ONLY .ms-sdc, no chrome ----------
   The AI homepage h2 has NO underline divider (our SDC adds one) and the body
   is a flat 18px at every width. One body class carries both so every band
   inherits them; individual flags still override where needed. */
.lp-home .ms-sdc h2::after{ content: none !important; }
.lp-home .ms-sdc h2{ text-wrap: wrap; }
.lp-home .ms-sdc p{ font-size: 18px; }

/* ---------- cta-orange — the recurring CTA (Simple Link, field_css_tag=cta-orange) ----------
   Class rides the <a>. AI `.btn.btn-lg`. 18px at ALL widths incl. mobile
   (project rule). Works on both normal + hero bands. */
.ms-sdc a.cta-orange,
.ms-sdc a.cta-orange:link,
.ms-sdc a.cta-orange:visited{
  display:inline-block; background:#F3954A !important; color:#fff !important;
  font-family:'Archivo' !important; font-weight:700 !important; font-size:18px !important;
  line-height:1.2 !important; text-decoration:none !important; text-align:center;
  padding:18px 36px !important; border:0 !important; border-radius:14px !important;
  box-shadow:0 8px 22px rgba(243,149,74,.38);
  transition:background .15s, transform .12s, box-shadow .2s;
}
.ms-sdc a.cta-orange:hover,
.ms-sdc a.cta-orange:focus{
  background:#E67F32 !important; color:#fff !important; transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(243,149,74,.48);
}
@media (max-width:760px){ .ms-sdc a.cta-orange{ font-size:18px !important; } }
/* cta-center — centre a trailing CTA under a left-aligned body (AI .cta-center) */
.ms-sdc.cta-center .ms-sdc__actions{ text-align:center; margin-top:52px; }

/* ---------- logo-marquee — Section 2. field_body = <h4> label + flat <img> list.
   normal.js wraps the imgs into .ms-mq > .ms-mq-track (duplicated) and animates. ---------- */
.ms-sdc--normal.logo-marquee{ padding-left:0 !important; padding-right:0 !important; }
.ms-sdc--normal.logo-marquee .ms-sdc__inner, .lp-home .ms-sdc--normal.logo-marquee .ms-sdc__inner{ max-width:none; }
.ms-sdc--normal.logo-marquee .ms-sdc__body > h4{
  text-align:center; font-family:'Archivo' !important; font-size:12px !important; font-weight:700 !important;
  letter-spacing:2.5px !important; text-transform:uppercase !important; color:#98a09d !important; margin:0 0 18px !important;
}
.ms-sdc--normal.logo-marquee .ms-mq{ position:relative; overflow:hidden; }
.ms-sdc--normal.logo-marquee .ms-mq-track{ display:flex; width:max-content; align-items:center; animation:ms-mscroll 40s linear infinite; }
.ms-sdc--normal.logo-marquee .ms-mq:hover .ms-mq-track{ animation-play-state:paused; }
.ms-sdc--normal.logo-marquee .ms-mq-track img{ height:46px; width:auto; max-width:280px; margin-right:64px; object-fit:contain; display:block; flex:none; }
/* before JS runs, or if it doesn't: show the flat list centred */
.ms-sdc--normal.logo-marquee .ms-sdc__body > img{ display:inline-block; height:46px; width:auto; margin:0 24px; vertical-align:middle; }
@keyframes ms-mscroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){
  .ms-sdc--normal.logo-marquee .ms-mq-track{ animation:none; flex-wrap:wrap; justify-content:center; width:100%; gap:22px 40px; }
  .ms-sdc--normal.logo-marquee .ms-mq-track img{ margin-right:0; }
}

/* ---------- pullquote-yellow — Section 3 close. blockquote pull quote + alone-line + CTA ---------- */
.ms-sdc.ms-sdc--normal.pullquote-yellow .ms-sdc__body blockquote{
  font-family:var(--ms-display); font-style:italic; font-weight:700; font-size:28px;
  color:var(--ms-petrol); line-height:1.35; border-left:4px solid #F7D154; background:none;
  padding:10px 0 10px 26px; margin:0 0 22px;
}
.ms-sdc--normal.pullquote-yellow .ms-sdc__body p{ font-size:18px; line-height:1.7; color:#3D3D3D; margin:0 0 16px; }
.ms-sdc--normal.pullquote-yellow .ms-sdc__body p strong{ color:var(--ms-petrol); }
@media (max-width:760px){ .ms-sdc.ms-sdc--normal.pullquote-yellow .ms-sdc__body blockquote{ font-size:21px; } }

/* ---------- swash-u — Sections 4/5. Partial-word teal underline (<u> inside h2) ---------- */
.ms-sdc.swash-u h2 u{
  text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px;
  text-decoration-color:var(--ms-petrol); text-decoration-skip-ink:none;
}

/* ---------- mech-band (+ mech-after) — Sections 4/5 on imageinmiddlev2.
   field_main_title = h2 + intro p + <h4> "So läuft es…" pill (sits above the
   diagram image). mech-after re-tints the pill teal. ---------- */
.ms-sdc--iimv2.mech-band .ms-sdc__header p{ font-size:18px; line-height:1.6; color:#3D3D3D; max-width:none; margin:0 0 6px; }
.ms-sdc--iimv2.mech-band .ms-sdc__header h4{
  display:inline-block; font-family:'Archivo' !important; font-size:12px !important; font-weight:700 !important;
  letter-spacing:1.5px !important; text-transform:uppercase !important; border-radius:999px !important;
  padding:6px 15px !important; margin:8px 0 0 !important;
  background:#FBF0EE !important; color:#A2564D !important;
}
.ms-sdc--iimv2.mech-band.mech-after .ms-sdc__header h4{ background:#E4F1EF !important; color:var(--ms-petrol) !important; }
.ms-sdc--iimv2.mech-band .ms-sdc__media{ margin:14px 0 0; }
.ms-sdc--iimv2.mech-band .ms-sdc__media img{ width:100%; height:auto; border-radius:8px; }
/* mech-after closing note (last p in body → teal semibold, AI .mnote.good) */
.ms-sdc--iimv2.mech-band.mech-after .ms-sdc__body > p:last-child{
  font-size:18px; line-height:1.6; color:var(--ms-petrol); font-weight:600; margin:15px 0 0; max-width:none;
}

/* ---------- keymsg — Section 4 dark-teal callout (blockquote in the iimv2 body) ---------- */
.ms-sdc.keymsg .ms-sdc__body blockquote{
  position:relative; background:linear-gradient(135deg,#005d5f,#007375); color:#fff;
  border:0; border-radius:20px; padding:40px 44px; margin:40px 0 0; overflow:hidden; font-style:normal;
  box-shadow:0 20px 46px rgba(0,115,117,.28);
}
.ms-sdc.keymsg .ms-sdc__body blockquote::before{ content:""; position:absolute; top:0; left:0; bottom:0; width:6px; background:#F3954A; }
.ms-sdc.keymsg .ms-sdc__body blockquote > p{ font-size:18px; line-height:1.65; color:rgba(255,255,255,.9); margin:0; }
.ms-sdc.keymsg .ms-sdc__body blockquote > p:first-child{
  font-family:var(--ms-display); font-weight:700; font-size:33px; line-height:1.2; color:#fff; margin:0 0 16px;
}
@media (max-width:760px){
  .ms-sdc.keymsg .ms-sdc__body blockquote{ padding:30px 26px; }
  .ms-sdc.keymsg .ms-sdc__body blockquote > p:first-child{ font-size:25px; }
}

/* ---------- goal-cards — Section 6. <ul> of 6 goals → gradient panel with 3-col
   white cards. Leading emoji baked via nth-child ::before icon box (author the
   <li> WITHOUT the emoji: <strong>Title</strong> + desc). Order matters. ---------- */
.ms-sdc--normal.goal-cards .ms-sdc__inner{ max-width:1060px; }
.ms-sdc--normal.goal-cards .ms-sdc__body > p{ font-size:18px; line-height:1.7; color:#3D3D3D; max-width:720px; }
.ms-sdc--normal.goal-cards .ms-sdc__body > p:last-child{ font-size:20px; margin-top:36px; max-width:none; }
.ms-sdc--normal.goal-cards .ms-sdc__body > p:last-child strong{ color:var(--ms-petrol); }
.ms-sdc.ms-sdc--normal.goal-cards .ms-sdc__body ul{
  list-style:none; margin:24px 0 0; padding:40px 34px;
  background:linear-gradient(180deg,#EAF4F2,#DCEEEB); border:1px solid #CDE3DF; border-radius:24px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.ms-sdc.ms-sdc--normal.goal-cards .ms-sdc__body ul > li{
  background:#fff; border:1px solid #E9E9E6; border-radius:18px; padding:30px 28px; border-top:1px solid #E9E9E6;
  box-shadow:0 8px 26px rgba(18,52,48,.08); margin:0; position:static;
  font-family:'Archivo'; color:#5b6763; font-size:16px; line-height:1.6;
}
.ms-sdc.ms-sdc--normal.goal-cards .ms-sdc__body ul > li::before{
  display:flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:12px;
  background:#E4F1EF; font-size:24px; line-height:1; margin:0 0 18px; position:static; content:"";
}
.ms-sdc.ms-sdc--normal.goal-cards .ms-sdc__body ul > li:nth-child(1)::before{ content:"😴"; }
.ms-sdc.ms-sdc--normal.goal-cards .ms-sdc__body ul > li:nth-child(2)::before{ content:"🌊"; }
.ms-sdc.ms-sdc--normal.goal-cards .ms-sdc__body ul > li:nth-child(3)::before{ content:"⚡"; }
.ms-sdc.ms-sdc--normal.goal-cards .ms-sdc__body ul > li:nth-child(4)::before{ content:"🎯"; }
.ms-sdc.ms-sdc--normal.goal-cards .ms-sdc__body ul > li:nth-child(5)::before{ content:"❤️"; }
.ms-sdc.ms-sdc--normal.goal-cards .ms-sdc__body ul > li:nth-child(6)::before{ content:"🌿"; }
.ms-sdc.ms-sdc--normal.goal-cards .ms-sdc__body ul > li strong{
  display:block; font-family:var(--ms-display); font-size:23px; color:var(--ms-petrol);
  line-height:1.2; margin:0 0 11px; font-weight:700;
}
@media (max-width:880px){ .ms-sdc.ms-sdc--normal.goal-cards .ms-sdc__body ul{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .ms-sdc.ms-sdc--normal.goal-cards .ms-sdc__body ul{ grid-template-columns:1fr; padding:24px 18px; } }

/* ---------- review-feature — Section 6b featured 3 testimonials.
   <li> = <p>quote</p><p><strong>Name</strong> Rolle</p>; ★ row baked. ---------- */
.ms-sdc--normal.review-feature .ms-sdc__inner{ max-width:1060px; }
.ms-sdc--normal.review-feature .ms-sdc__body > p{ font-size:18px; }
.ms-sdc.ms-sdc--normal.review-feature .ms-sdc__body ul{
  list-style:none; margin:44px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.ms-sdc.ms-sdc--normal.review-feature .ms-sdc__body ul > li{
  background:#fff; border:1.5px solid #A9D2CC; border-radius:18px; padding:30px; margin:0; border-top:1.5px solid #A9D2CC;
  box-shadow:0 3px 14px rgba(18,52,48,.05); position:static; margin-bottom: 20px;
}
.ms-sdc.ms-sdc--normal.review-feature .ms-sdc__body ul > li::before{
  content:""; display:block; width:97px; height:17px; margin:0 0 13px; position:static;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='97' height='17' viewBox='0 0 97 17'><g fill='%233AA76D'><rect x='0' width='17' height='17' rx='4'/><rect x='20' width='17' height='17' rx='4'/><rect x='40' width='17' height='17' rx='4'/><rect x='60' width='17' height='17' rx='4'/><rect x='80' width='17' height='17' rx='4'/></g><g fill='%23fff'><path d='M8.50,2.70 L9.97,6.68 L14.21,6.85 L10.88,9.47 L12.03,13.55 L8.50,11.20 L4.97,13.55 L6.12,9.47 L2.79,6.85 L7.03,6.68 Z'/><path d='M28.50,2.70 L29.97,6.68 L34.21,6.85 L30.88,9.47 L32.03,13.55 L28.50,11.20 L24.97,13.55 L26.12,9.47 L22.79,6.85 L27.03,6.68 Z'/><path d='M48.50,2.70 L49.97,6.68 L54.21,6.85 L50.88,9.47 L52.03,13.55 L48.50,11.20 L44.97,13.55 L46.12,9.47 L42.79,6.85 L47.03,6.68 Z'/><path d='M68.50,2.70 L69.97,6.68 L74.21,6.85 L70.88,9.47 L72.03,13.55 L68.50,11.20 L64.97,13.55 L66.12,9.47 L62.79,6.85 L67.03,6.68 Z'/><path d='M88.50,2.70 L89.97,6.68 L94.21,6.85 L90.88,9.47 L92.03,13.55 L88.50,11.20 L84.97,13.55 L86.12,9.47 L82.79,6.85 L87.03,6.68 Z'/></g></svg>") left center no-repeat;
}
.ms-sdc--normal.review-feature .ms-sdc__body ul > li p{ font-size:16px; line-height:1.6; margin:0 0 15px; color:#3D3D3D; }
.ms-sdc--normal.review-feature .ms-sdc__body ul > li p:last-child{ margin:0; padding-top:13px; border-top:1px solid #E9E9E6; }
.ms-sdc--normal.review-feature .ms-sdc__body ul > li p:last-child strong{ display:block; color:#262626; font-size:14px; }
@media (max-width:880px){ .ms-sdc.ms-sdc--normal.review-feature .ms-sdc__body ul{ grid-template-columns:1fr; } }

/* ---------- review-grid — Section 6b masonry 12 testimonials + CTA (CSS columns) ---------- */
.ms-sdc--normal.review-grid .ms-sdc__inner{ max-width:1060px; }
.ms-sdc.ms-sdc--normal.review-grid .ms-sdc__body ul{ list-style:none; margin:0; padding:0; columns:3; column-gap:20px; }
.ms-sdc.ms-sdc--normal.review-grid .ms-sdc__body ul > li{
  break-inside:avoid; display:inline-block; width:100%;
  background:#fff; border:1px solid #E9E9E6; border-radius:16px; padding:24px; margin:0 0 20px; border-top:1px solid #E9E9E6;
  box-shadow:0 3px 14px rgba(18,52,48,.05); position:static;
}
.ms-sdc.ms-sdc--normal.review-grid .ms-sdc__body ul > li::before{
  content:""; display:block; width:97px; height:17px; margin:0 0 13px; position:static;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='97' height='17' viewBox='0 0 97 17'><g fill='%233AA76D'><rect x='0' width='17' height='17' rx='4'/><rect x='20' width='17' height='17' rx='4'/><rect x='40' width='17' height='17' rx='4'/><rect x='60' width='17' height='17' rx='4'/><rect x='80' width='17' height='17' rx='4'/></g><g fill='%23fff'><path d='M8.50,2.70 L9.97,6.68 L14.21,6.85 L10.88,9.47 L12.03,13.55 L8.50,11.20 L4.97,13.55 L6.12,9.47 L2.79,6.85 L7.03,6.68 Z'/><path d='M28.50,2.70 L29.97,6.68 L34.21,6.85 L30.88,9.47 L32.03,13.55 L28.50,11.20 L24.97,13.55 L26.12,9.47 L22.79,6.85 L27.03,6.68 Z'/><path d='M48.50,2.70 L49.97,6.68 L54.21,6.85 L50.88,9.47 L52.03,13.55 L48.50,11.20 L44.97,13.55 L46.12,9.47 L42.79,6.85 L47.03,6.68 Z'/><path d='M68.50,2.70 L69.97,6.68 L74.21,6.85 L70.88,9.47 L72.03,13.55 L68.50,11.20 L64.97,13.55 L66.12,9.47 L62.79,6.85 L67.03,6.68 Z'/><path d='M88.50,2.70 L89.97,6.68 L94.21,6.85 L90.88,9.47 L92.03,13.55 L88.50,11.20 L84.97,13.55 L86.12,9.47 L82.79,6.85 L87.03,6.68 Z'/></g></svg>") left center no-repeat;
}
.ms-sdc--normal.review-grid .ms-sdc__body ul > li p{ font-size:16px; line-height:1.66; margin:0 0 15px; color:#3D3D3D; }
.ms-sdc--normal.review-grid .ms-sdc__body ul > li p:last-child{ margin:0; padding-top:13px; border-top:1px solid #E9E9E6; }
.ms-sdc--normal.review-grid .ms-sdc__body ul > li p:last-child strong{ display:block; color:#262626; font-size:14px; }
@media (max-width:980px){ .ms-sdc.ms-sdc--normal.review-grid .ms-sdc__body ul{ columns:2; } }
@media (max-width:660px){ .ms-sdc.ms-sdc--normal.review-grid .ms-sdc__body ul{ columns:1; } }

/* ---------- approach-steps — Section 6.5. <ol> of 4 → 4-col numbered cards (01–04) + CTA ---------- */
.ms-sdc--normal.approach-steps .ms-sdc__inner{ max-width:1060px; }
.ms-sdc--normal.approach-steps .ms-sdc__body > p{ font-size:18px; }
.ms-sdc.ms-sdc--normal.approach-steps .ms-sdc__body ol{
  list-style:none; counter-reset:apstep; margin:46px 0 38px; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
.ms-sdc.ms-sdc--normal.approach-steps .ms-sdc__body ol > li{
  counter-increment:apstep; background:#fff; border:1px solid #E9E9E6; border-radius:16px; padding:28px 26px; border-top:1px solid #E9E9E6;
  box-shadow:0 3px 14px rgba(18,52,48,.05); margin:0; position:static;
  font-family:'Archivo'; color:#67736f; font-size:16px; line-height:1.6;
}
.ms-sdc.ms-sdc--normal.approach-steps .ms-sdc__body ol > li::before{
  content:"0" counter(apstep); display:block; position:static; width:auto; height:auto; background:none; border:0;
  font-family:var(--ms-display); font-weight:700; color:var(--ms-petrol); font-size:19px; margin:0 0 18px;
}
/* Icon box (inline <img> at the start of each <li>) — teal-soft rounded, AI .stepc .si */
.ms-sdc.ms-sdc--normal.approach-steps .ms-sdc__body ol > li img{
  display:block; width:48px; height:48px; padding:13px; border-radius:13px;
  background:#E4F1EF; margin:0 0 20px; object-fit:contain;
}
.ms-sdc.ms-sdc--normal.approach-steps .ms-sdc__body ol > li strong{
  display:block; font-family:var(--ms-display); color:var(--ms-petrol); font-size:19px; line-height:1.25; margin:0 0 10px; font-weight:700;
}
@media (max-width:860px){ .ms-sdc.ms-sdc--normal.approach-steps .ms-sdc__body ol{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .ms-sdc.ms-sdc--normal.approach-steps .ms-sdc__body ol{ grid-template-columns:1fr; } }

/* ---------- stat-panels — Section 7 close. <ul> of 2 → 2-col stat cards + note ---------- */
.ms-sdc--normal.stat-panels .ms-sdc__inner{ max-width:1060px; }
.ms-sdc.ms-sdc--normal.stat-panels .ms-sdc__body ul{
  list-style:none; margin:20px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:20px;
}
.ms-sdc.ms-sdc--normal.stat-panels .ms-sdc__body ul > li{
  background:#fff; border:1px solid #E9E9E6; border-radius:16px; padding:30px; margin:0; border-top:1px solid #E9E9E6;
  box-shadow:0 3px 14px rgba(18,52,48,.05); position:static; font-size:16px; line-height:1.6; color:#3D3D3D;
}
.ms-sdc.ms-sdc--normal.stat-panels .ms-sdc__body ul > li::before{ content:none; }
.ms-sdc--normal.stat-panels .ms-sdc__body ul > li strong:first-child{
  display:block; font-family:var(--ms-display); font-weight:700; font-size:30px; color:var(--ms-petrol); margin:0 0 8px;
}
.ms-sdc--normal.stat-panels .ms-sdc__body ul > li strong:nth-of-type(2){
  display:block; font-family:'Archivo'; font-weight:700; font-size:18px; color:var(--ms-ink); margin:0 0 10px;
}
.ms-sdc--normal.stat-panels .ms-sdc__body > p:last-child{ color:#77837f; font-size:14px; margin-top:26px; }
.ms-sdc--normal.stat-panels .ms-sdc__body > p:last-child a{ color:var(--ms-petrol); }
@media (max-width:820px){ .ms-sdc.ms-sdc--normal.stat-panels .ms-sdc__body ul{ grid-template-columns:1fr; } }

/* ---------- home-final — Section 10 dark gradient CTA band (pair on-dark; field bg #007375).
   Flag OWNS the gradient + vertical padding (padding fields → 0). h2 + <ul> of 3
   translucent quote cards (inline <img> avatar float-left, ★ baked gold) + CTA. ---------- */
.ms-sdc--normal.home-final{
  background:
    radial-gradient(ellipse 700px 420px at 82% 0%, rgba(255,255,255,.10), transparent 60%),
    #115759;
}
.ms-sdc.ms-sdc--normal.home-final{ padding-top:92px !important; padding-bottom:92px !important; }
.ms-sdc--normal.home-final .ms-sdc__inner{ max-width:1060px; text-align:center; }
.ms-sdc--normal.home-final .ms-sdc__body h2{ color:#fff !important; max-width:880px; margin:0 auto 32px !important; }
.ms-sdc.ms-sdc--normal.home-final .ms-sdc__body ul{
  list-style:none; margin:0 auto 44px; padding:0; max-width:1000px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.ms-sdc.ms-sdc--normal.home-final .ms-sdc__body ul > li{
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); border-radius:16px; padding:26px 24px;
  border-top:1px solid rgba(255,255,255,.16); text-align:left; margin:0; position:static; color:#fff;
}
.ms-sdc.ms-sdc--normal.home-final .ms-sdc__body ul > li::before{
  content:"★★★★★"; display:block; color:#F7D154; letter-spacing:2px; font-size:15px; margin:0 0 12px; position:static;
}
.ms-sdc--normal.home-final .ms-sdc__body ul > li p{ color:#fff; font-size:18px; line-height:1.55; margin:0 0 16px; }
.ms-sdc--normal.home-final .ms-sdc__body ul > li p:last-of-type{
  overflow:hidden; margin:0; color:#EAF6F4; font-size:14px; line-height:1.35; font-weight:600;
}
.ms-sdc--normal.home-final .ms-sdc__body ul > li p:last-of-type img{
  float:left; width:46px; height:46px; border-radius:50%; object-fit:cover;
  border:2px solid rgba(255,255,255,.35); margin-right:12px;
}
.ms-sdc--normal.home-final .ms-sdc__body ul > li p:last-of-type strong{ color:#EAF6F4; font-weight:600; }
@media (max-width:820px){ .ms-sdc.ms-sdc--normal.home-final .ms-sdc__body ul{ grid-template-columns:1fr; max-width:460px; } }

/* ---------- faq — Section 9.5. field_body = h2 + <h4> question + <p> answer pairs;
   normal.js (msSdcFaq) wraps each <h4> + its answers into a native <details>/<summary>.
   Podcast links styled by href (a[href*="spotify"] / [*="youtube"]) — no classes. ---------- */
.ms-sdc--normal.faq .ms-sdc__inner{ max-width:840px; }
/* No-JS / pre-JS fallback: show the authored <h4> as a readable question, not the
   uppercase eyebrow. Once msSdcFaq runs the <h4> is replaced by a <summary>. */
.ms-sdc--normal.faq .ms-sdc__body > h4{
  text-transform:none !important; letter-spacing:normal !important; color:#262626 !important;
  font-size:17px !important; margin:22px 0 8px !important;
}
.ms-sdc--normal.faq .ms-sdc__body details{
  background:#fff; border:1px solid #E9E9E6; border-radius:14px; box-shadow:0 3px 14px rgba(18,52,48,.05);
  overflow:hidden; margin:0 0 14px;
}
.ms-sdc--normal.faq .ms-sdc__body summary{
  list-style:none; cursor:pointer; padding:22px 26px; font-family:'Archivo'; font-weight:700; color:#262626;
  font-size:17px; line-height:1.4; display:flex; justify-content:space-between; align-items:center; gap:18px;
}
.ms-sdc--normal.faq .ms-sdc__body summary::-webkit-details-marker{ display:none; }
.ms-sdc--normal.faq .ms-sdc__body summary::after{
  content:""; width:11px; height:11px; border-right:2.5px solid var(--ms-petrol); border-bottom:2.5px solid var(--ms-petrol);
  transform:rotate(45deg); transition:transform .2s; flex:none;
}
.ms-sdc--normal.faq .ms-sdc__body details[open] summary::after{ transform:rotate(-135deg); }
.ms-sdc--normal.faq .ms-sdc__body details > *:not(summary){ padding:0 26px 24px; font-size:18px; line-height:1.65; color:#3D3D3D; margin:0; }
.ms-sdc--normal.faq .ms-sdc__body details a{ color:var(--ms-petrol); font-weight:600; }
.ms-sdc--normal.faq .ms-sdc__body details a[href*="spotify"],
.ms-sdc--normal.faq .ms-sdc__body details a[href*="youtube"]{
  display:inline-flex; align-items:center; gap:9px; padding:11px 20px; border-radius:999px; font-weight:700;
  font-size:14.5px; text-decoration:none; color:#fff !important; margin:18px 12px 0 0;
}
.ms-sdc--normal.faq .ms-sdc__body details a[href*="spotify"]{ background:#1DB954; }
.ms-sdc--normal.faq .ms-sdc__body details a[href*="youtube"]{ background:#FF0000; }

/* =====================================================================
   HOMEPAGE FIDELITY FIXES — measured against the source 2026-07-28.
   (1) Section h2 are TEAL 37px in the AI, not the base dark-ink 42px.
   (2) The AI wraps every band in a 1060px column; the base normal/iimv2
       inner (760/840) wrapped the teal h2 too early → widen to match.
   Placed last so equal-specificity ties resolve in these rules' favour.
   ===================================================================== */
/* (1) teal section headings — dark bands (nextstep, home-final) keep their
   white override (0,3,1 !important beats the 0,2,1 here). */
.lp-home .ms-sdc h2{
  color:#007375 !important; font-size:37px !important;
  line-height:1.12 !important; letter-spacing:-0.4px !important;
}
@media (max-width:760px){ .lp-home .ms-sdc h2{ font-size:27px !important; } }

/* (2) band width = the AI 1060 wrap. Keep FAQ (840) and constrain the
   pull-quote content to the AI widths inside the wider column. */
.lp-home .ms-sdc--normal .ms-sdc__inner,
.lp-home .ms-sdc--iimv2 .ms-sdc__inner{ max-width:1060px; }
.lp-home .ms-sdc--normal.faq .ms-sdc__inner{ max-width:840px; }
.lp-home .ms-sdc--hero.founder .ms-sdc__inner{ max-width:1060px; }
.lp-home .ms-sdc--normal.pullquote-yellow .ms-sdc__body blockquote{ max-width:720px; }
.lp-home .ms-sdc--normal.pullquote-yellow .ms-sdc__body p{ max-width:760px; }

/* (3) body text = the AI --text #3D3D3D (base .ms-sdc is the darker #202a2a).
   Dark bands keep their own white text (higher specificity). */
.lp-home .ms-sdc, .lp-home .ms-sdc p, .lp-home .ms-sdc li{ color:#3D3D3D; }
.lp-home .ms-sdc strong{ color:#262626; }

/* =====================================================================
   ENTDECKEN ("Entdecken & Ressourcen") — resource-hub card-grid flags.
   All on the `normal` SDC (reused): a centred section header + a <ul>
   turned into a card grid. Palette: petrol #115759, petrol-l #177375,
   mint #8FE0D8, teal #007375, teal-mid #00A295, teal-soft #E4F1EF,
   grey #EEF0F1, border #E9E9E6. Fonts Archivo + Recoleta. Breakpoints
   900 / 760 / 640 / 600. Pair each with the existing `centered` flag.
   Doubled `.ms-sdc.ms-sdc.<flag>` selectors beat the base ol/ul rules.
   ===================================================================== */

/* ---- Shared centred section header (h2 + teal <em> highlight + intro p) ---- */
.ms-sdc--normal.link-cards, .ms-sdc--normal.resource-grid,
.ms-sdc--normal.info-cards, .ms-sdc--normal.episode-list { font-family: 'Archivo'; }
.ms-sdc--normal.link-cards   .ms-sdc__body > h2,
.ms-sdc--normal.resource-grid .ms-sdc__body > h2,
.ms-sdc--normal.info-cards   .ms-sdc__body > h2,
.ms-sdc--normal.episode-list .ms-sdc__body > h2 {
  font-family: 'Recoleta' !important; font-weight: 600 !important;
  font-size: clamp(26px,4vw,40px) !important; line-height: 1.14 !important;
  letter-spacing: -0.01em !important; color: #141414 !important;
  max-width: 720px; margin: 0 auto 12px !important; text-align: center;
}
.ms-sdc--normal.link-cards   .ms-sdc__body > h2 em,
.ms-sdc--normal.resource-grid .ms-sdc__body > h2 em,
.ms-sdc--normal.info-cards   .ms-sdc__body > h2 em,
.ms-sdc--normal.episode-list .ms-sdc__body > h2 em { color: #007375 !important; font-style: normal; }
.ms-sdc--normal.link-cards   .ms-sdc__body > p,
.ms-sdc--normal.resource-grid .ms-sdc__body > p,
.ms-sdc--normal.info-cards   .ms-sdc__body > p,
.ms-sdc--normal.episode-list .ms-sdc__body > p {
  color: #262626; font-size: 20px; line-height: 1.65; max-width: 720px; margin: 0 auto 44px; text-align: center;
}
.ms-sdc--normal.link-cards   .ms-sdc__body > p strong,
.ms-sdc--normal.resource-grid .ms-sdc__body > p strong,
.ms-sdc--normal.info-cards   .ms-sdc__body > p strong,
.ms-sdc--normal.episode-list .ms-sdc__body > p strong { color: #141414; }

/* ---------------------------------------------------------------------
   link-cards (Band 3) — <ul> → 2 large petrol link cards (icon medallion
   top-left, Recoleta <strong> title, desc, mint arrow link). Card 2 = the
   lighter petrol-l tone. Icons baked by position. Pair with `centered`.
   --------------------------------------------------------------------- */
.ms-sdc--normal.link-cards .ms-sdc__inner { max-width: 1120px; }
.ms-sdc.ms-sdc.link-cards ul {
  list-style: none; padding: 0; margin: 0; text-align: left;
  display: grid; grid-template-columns: 1fr 1fr; gap: 26px;
}
.ms-sdc.ms-sdc.link-cards ul > li {
  position: relative; margin: 0; padding: 34px; padding-top: 96px; min-height: 280px;
  border: 0; border-radius: 22px; background: #115759; color: #EAF4F4;
  font-size: 18px; line-height: 1.65;
  display: flex; flex-direction: column; justify-content: flex-end;
  transition: transform .2s, box-shadow .2s;
}
.ms-sdc.ms-sdc.link-cards ul > li:nth-child(2) { background: #177375; }
.ms-sdc.ms-sdc.link-cards ul > li:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -34px rgba(18,52,48,.5); }
.ms-sdc.ms-sdc.link-cards ul > li::before {
  content: ""; position: absolute; top: 30px; left: 34px; width: 50px; height: 50px;
  border-radius: 14px; background: rgba(143,224,216,.16) no-repeat center / 25px 25px;
}
.ms-sdc.ms-sdc.link-cards ul > li:nth-child(1)::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%238FE0D8%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%208v4l3%202%22%2F%3E%3C%2Fsvg%3E");
}
.ms-sdc.ms-sdc.link-cards ul > li:nth-child(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%238FE0D8%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2015a2%202%200%200%201-2%202H7l-4%204V5a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202z%22%2F%3E%3C%2Fsvg%3E");
}
.ms-sdc.ms-sdc.link-cards ul > li strong {
  display: block; font-family: 'Recoleta'; font-weight: 600; color: #fff;
  font-size: 26px; line-height: 1.14; margin: 0 0 8px;
}
.ms-sdc.ms-sdc.link-cards ul > li a {
  margin-top: 16px; color: #8FE0D8 !important; font-family: 'Archivo' !important;
  font-weight: 700 !important; font-size: 15px !important; text-decoration: none !important;
  display: inline-flex; align-items: center; gap: 6px; transition: gap .2s;
}
.ms-sdc.ms-sdc.link-cards ul > li a:hover { color: #8FE0D8 !important; gap: 9px; }
@media (max-width: 900px) { .ms-sdc.ms-sdc.link-cards ul { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .ms-sdc.ms-sdc.link-cards ul > li { min-height: auto; padding: 26px; justify-content: flex-start; }
  .ms-sdc.ms-sdc.link-cards ul > li::before { position: static; margin: 0 0 16px; }
}

/* ---------------------------------------------------------------------
   resource-grid (Band 5) — <ul> → 3-col light cards, each with a petrol
   top-bar tag (<em>), Recoleta <strong> title, desc, teal arrow link.
   "Soon" cards = list items WITHOUT a link (:not(:has(a))): grey bar,
   muted, auto "Kommt bald" label. Pair with `centered`.
   --------------------------------------------------------------------- */
.ms-sdc--normal.resource-grid .ms-sdc__inner { max-width: 1120px; }
.ms-sdc.ms-sdc.resource-grid ul {
  list-style: none; padding: 0; margin: 0; text-align: left;
  display: grid; grid-template-columns: repeat(3,1fr); gap: 22px;
}
.ms-sdc.ms-sdc.resource-grid ul > li {
  position: relative; margin: 0; padding: 22px 24px; overflow: hidden;
  border: 1px solid #E9E9E6; border-radius: 18px; background: #fff;
  color: #262626; font-size: 18px; line-height: 1.65;
  display: flex; flex-direction: column;
  transition: transform .2s, box-shadow .2s;
}
.ms-sdc.ms-sdc.resource-grid ul > li:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -34px rgba(18,52,48,.4); }
.ms-sdc.ms-sdc.resource-grid ul > li::before { content: none; }
/* top tag bar (<em>) — breaks out to the card edges */
.ms-sdc.ms-sdc.resource-grid ul > li em {
  display: block; margin: -22px -24px 16px; padding: 20px 24px; background: #115759;
  color: #8FE0D8; font-style: normal; font-weight: 700; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase;
}
.ms-sdc.ms-sdc.resource-grid ul > li strong {
  display: block; font-family: 'Recoleta'; font-weight: 600; color: #141414;
  font-size: 20px; line-height: 1.25; margin: 0 0 8px;
}
.ms-sdc.ms-sdc.resource-grid ul > li a {
  margin-top: auto; padding-top: 8px; color: #007375 !important; font-family: 'Archivo' !important;
  font-weight: 700 !important; font-size: 15px !important; text-decoration: none !important;
  display: inline-flex; align-items: center; gap: 6px; transition: gap .2s;
}
.ms-sdc.ms-sdc.resource-grid ul > li a:hover { color: #005E60 !important; gap: 9px; }
/* "soon" state: no link */
.ms-sdc.ms-sdc.resource-grid ul > li:not(:has(a)) { opacity: .9; }
.ms-sdc.ms-sdc.resource-grid ul > li:not(:has(a)) em { background: #EEF0F1; color: #005E60; }
.ms-sdc.ms-sdc.resource-grid ul > li:not(:has(a))::after {
  content: "Kommt bald"; margin-top: auto; padding-top: 8px;
  color: #262626; font-weight: 600; font-size: 15px;
}
@media (max-width: 900px) and (min-width: 601px) { .ms-sdc.ms-sdc.resource-grid ul { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .ms-sdc.ms-sdc.resource-grid ul { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------
   info-cards (Band 7) — <ul> → 2-col light cards, teal icon medallion,
   Recoleta <strong> title, teal <em> count label, desc, teal arrow link.
   Icons baked by position. Pair with `centered`; band bg = grey #EEF0F1.
   --------------------------------------------------------------------- */
.ms-sdc--normal.info-cards .ms-sdc__inner { max-width: 760px; }
.ms-sdc.ms-sdc.info-cards ul {
  list-style: none; padding: 0; margin: 0; text-align: left;
  display: grid; grid-template-columns: repeat(2,1fr); gap: 24px;
}
.ms-sdc.ms-sdc.info-cards ul > li {
  position: relative; margin: 0; padding: 32px 30px;
  border: 1px solid #E9E9E6; border-radius: 20px; background: #fff;
  color: #262626; font-size: 18px; line-height: 1.65;
  display: flex; flex-direction: column;
  transition: transform .2s, box-shadow .2s;
}
.ms-sdc.ms-sdc.info-cards ul > li:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -34px rgba(18,52,48,.4); }
.ms-sdc.ms-sdc.info-cards ul > li::before {
  content: ""; width: 54px; height: 54px; border-radius: 16px; margin: 0 0 18px;
  background: #E4F1EF no-repeat center / 26px 26px;
}
.ms-sdc.ms-sdc.info-cards ul > li:nth-child(1)::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23007375%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205h16M4%2012h16M4%2019h10%22%2F%3E%3C%2Fsvg%3E");
}
.ms-sdc.ms-sdc.info-cards ul > li:nth-child(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23007375%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2020V10M18%2020V4M6%2020v-6%22%2F%3E%3C%2Fsvg%3E");
}
.ms-sdc.ms-sdc.info-cards ul > li strong {
  display: block; font-family: 'Recoleta'; font-weight: 600; color: #141414;
  font-size: 21px; line-height: 1.2; margin: 0 0 6px;
}
.ms-sdc.ms-sdc.info-cards ul > li em {
  display: block; font-style: normal; color: #007375; font-weight: 700;
  font-size: 13px; letter-spacing: .03em; margin: 0 0 12px;
}
.ms-sdc.ms-sdc.info-cards ul > li a {
  margin-top: auto; padding-top: 8px; color: #007375 !important; font-family: 'Archivo' !important;
  font-weight: 700 !important; font-size: 15px !important; text-decoration: none !important;
  display: inline-flex; align-items: center; gap: 6px; transition: gap .2s;
}
.ms-sdc.ms-sdc.info-cards ul > li a:hover { color: #005E60 !important; gap: 9px; }
@media (max-width: 900px) { .ms-sdc.ms-sdc.info-cards ul { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------
   episode-list (Band 4b) — <ul> → stacked white episode rows: teal-mid
   <em> badge, Recoleta <strong> title, desc, then a Spotify (teal-soft)
   + a YouTube (petrol) pill link. Brand icons baked from href. Pair with
   `centered`. (Links sit below the copy — matches the AI mobile layout.)
   --------------------------------------------------------------------- */
.ms-sdc--normal.episode-list .ms-sdc__inner { max-width: 1000px; }
.ms-sdc.ms-sdc.episode-list ul {
  list-style: none; padding: 0; margin: 0; text-align: left;
  display: flex; flex-direction: column; gap: 16px;
}
.ms-sdc.ms-sdc.episode-list ul > li {
  position: relative; margin: 0; padding: 26px 28px; padding-right: 182px;
  min-height: 92px; border: 1px solid #E9E9E6; border-radius: 18px;
  background: #fff; color: #262626; font-size: 18px; line-height: 1.55;
  box-shadow: 0 3px 14px rgba(18,52,48,.05);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
}
.ms-sdc.ms-sdc.episode-list ul > li::before { content: none; }
.ms-sdc.ms-sdc.episode-list ul > li em {
  display: block; font-style: normal; color: #00A295; font-weight: 700;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 8px;
}
.ms-sdc.ms-sdc.episode-list ul > li strong {
  display: block; font-family: 'Recoleta'; font-weight: 600; color: #141414;
  font-size: 20px; line-height: 1.3; margin: 0 0 8px;
}
/* two links = a right-hand stacked column, vertically centred (AI `1fr auto`) */
.ms-sdc.ms-sdc.episode-list ul > li a {
  position: absolute; right: 28px; width: 122px; margin: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Archivo' !important; font-weight: 700 !important; font-size: 14px !important;
  padding: 11px 18px !important; border-radius: 10px !important; text-decoration: none !important;
  white-space: nowrap; transition: transform .15s, background .2s;
}
.ms-sdc.ms-sdc.episode-list ul > li a[href*="spotify"] { top: 50%; margin-top: -45px; }
.ms-sdc.ms-sdc.episode-list ul > li a[href*="youtube"] { top: 50%; margin-top: 5px; }
.ms-sdc.ms-sdc.episode-list ul > li a::before {
  content: ""; width: 16px; height: 16px; flex: none; background: no-repeat center / contain;
}
.ms-sdc.ms-sdc.episode-list ul > li a[href*="spotify"] { background: #E4F1EF !important; color: #005E60 !important; }
.ms-sdc.ms-sdc.episode-list ul > li a[href*="spotify"]:hover { background: #D3E9E4 !important; color: #005E60 !important; transform: translateY(-1px); }
.ms-sdc.ms-sdc.episode-list ul > li a[href*="spotify"]::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23005E60%22%3E%3Cpath%20d%3D%22M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm4.6%2014.4a.6.6%200%200%201-.86.2c-2.35-1.44-5.3-1.76-8.79-.96a.62.62%200%201%201-.28-1.21c3.8-.87%207.08-.5%209.72%201.11a.6.6%200%200%201%20.2.86zm1.23-2.75a.78.78%200%200%201-1.07.26c-2.69-1.65-6.79-2.13-9.98-1.17a.78.78%200%201%201-.45-1.49c3.64-1.1%208.16-.56%2011.24%201.33a.78.78%200%200%201%20.26%201.07zm.11-2.87C14.83%208.9%209.4%208.72%206.3%209.66a.94.94%200%201%201-.54-1.8c3.56-1.08%209.56-.87%2013.33%201.37a.94.94%200%200%201-.96%201.61z%22%2F%3E%3C%2Fsvg%3E");
}
.ms-sdc.ms-sdc.episode-list ul > li a[href*="youtube"] { background: #115759 !important; color: #fff !important; }
.ms-sdc.ms-sdc.episode-list ul > li a[href*="youtube"]:hover { background: #177375 !important; color: #fff !important; transform: translateY(-1px); }
.ms-sdc.ms-sdc.episode-list ul > li a[href*="youtube"]::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23ffffff%22%3E%3Cpath%20d%3D%22M23%2012s0-3.9-.5-5.6a2.9%202.9%200%200%200-2-2C18.7%204%2012%204%2012%204s-6.7%200-8.5.4a2.9%202.9%200%200%200-2%202C1%208.1%201%2012%201%2012s0%203.9.5%205.6a2.9%202.9%200%200%200%202%202C5.3%2020%2012%2020%2012%2020s6.7%200%208.5-.4a2.9%202.9%200%200%200%202-2C23%2015.9%2023%2012%2023%2012zM10%2015.5v-7l6%203.5z%22%2F%3E%3C%2Fsvg%3E");
}
/* ≤640: episode links drop below the copy, in a row (matches AI mobile) */
@media (max-width: 640px) {
  /* two equal half-width buttons in a bottom row (AI mobile `.eplink{flex:1}`) */
  .ms-sdc.ms-sdc.episode-list ul > li {
    padding: 26px 28px 84px; min-height: 0; justify-content: flex-start;
  }
  .ms-sdc.ms-sdc.episode-list ul > li a {
    top: auto; bottom: 26px; width: calc(50% - 33px); margin: 0;
  }
  .ms-sdc.ms-sdc.episode-list ul > li a[href*="spotify"] { top: auto; bottom: 26px; left: 28px; right: auto; margin-top: 0; }
  .ms-sdc.ms-sdc.episode-list ul > li a[href*="youtube"] { top: auto; bottom: 26px; right: 28px; left: auto; margin-top: 0; }
}

/* =====================================================================
   fMRT-STUDIE  (basic_page_container, body.lp-fmrt).
   Source: Mind Switch - fMRT-Studie-v6.html · Mapping: fmrtv6/fmrtv6_Mapping.md.
   Archivo (body) + Recoleta (display). Palette petrol #115759 /
   petrol-d #0C4143, teal #007375, teal-dark #005E60, teal-mid #00A295,
   teal-soft #E4F1EF, mint #8FE0D8 / mint-soft #BFE4DF, orange CTA #F3954A,
   gold #F2C14E, grey #EEF0F1, ink #1A1A1A/#141414, muted #262626.
   Breakpoints 900 / 760 / 640. Page-scope under .lp-fmrt; flags under
   .ms-sdc.<flag>. Appended last so equal-specificity ties win on order.
   No page chrome here (that lives in styles.css, body.lp-fmrt).
   ===================================================================== */

/* ---------- page-scope resets (body.lp-fmrt) — style ONLY .ms-sdc ---------- */
.lp-fmrt .ms-sdc{ font-family:'Archivo','Roboto',sans-serif; }
.lp-fmrt .ms-sdc h2::after{ content:none !important; }
.lp-fmrt .ms-sdc p{ font-size:18px; line-height:1.65; }
/* section-head <h2>: Recoleta 27→40, no divider, ink; on-dark → white */
.lp-fmrt .ms-sdc h2{
  font-family:var(--ms-display) !important; font-weight:600 !important; color:#141414 !important;
  font-size:clamp(27px,3.8vw,40px) !important; line-height:1.14 !important;
  letter-spacing:-.3px !important; margin:0 0 16px !important;
}
.lp-fmrt .ms-sdc.on-dark h2{ color:#fff !important; }
/* accent highlight = <em> inside a heading: teal on light, mint on dark; never italic */
.lp-fmrt .ms-sdc h1 em, .lp-fmrt .ms-sdc h2 em{ font-style:normal; color:#007375; }
.lp-fmrt .ms-sdc.on-dark h1 em, .lp-fmrt .ms-sdc.on-dark h2 em{ color:#8FE0D8; }

/* ---------- study-hero (P1) — dark petrol hero, centred h1 + lead. Pair on-dark centered. */
.ms-sdc--normal.study-hero .ms-sdc__inner{ max-width:860px; }
.ms-sdc--normal.study-hero h1{
  font-family:var(--ms-display) !important; font-weight:600 !important; color:#fff !important;
  font-size:clamp(34px,4.8vw,52px) !important; line-height:1.13 !important;
  letter-spacing:-.5px !important; margin:0 0 22px !important; text-align:center !important;
}
.ms-sdc--normal.study-hero h1::after{ content:none !important; }
.ms-sdc--normal.study-hero p{ color:#fff; font-size:20px; line-height:1.62; margin:0 auto; max-width:560px; }
@media (max-width:640px){
  .ms-sdc--normal.study-hero h1{ font-size:30px !important; }
  .ms-sdc--normal.study-hero p{ font-size:18px; }
}

/* ---------- inst-strip (P2) — dark petrol-d bar: 4 label/value items. Pair on-dark. */
.ms-sdc--normal.inst-strip .ms-sdc__inner{ max-width:1080px; }
.ms-sdc.ms-sdc.inst-strip ul{
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap;
  align-items:center; justify-content:center; gap:0; text-align:center;
}
.ms-sdc.ms-sdc.inst-strip ul > li{
  margin:0; padding:0 20px; position:static;
  display:flex; flex-direction:column; gap:3px; align-items:center;
}
.ms-sdc.ms-sdc.inst-strip ul > li::before{ content:none; }
.ms-sdc.inst-strip ul > li em{
  font-style:normal; color:#C4DCDC; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; line-height:1.4;
}
.ms-sdc.inst-strip ul > li strong{ color:#fff; font-size:15px; font-weight:600; }
@media (min-width:901px){
  .ms-sdc.inst-strip ul > li + li{ border-left:1px solid rgba(143,224,216,.18); }
}
@media (max-width:900px){ .ms-sdc.ms-sdc.inst-strip ul{ gap:18px 24px; } }

/* ---------- stress-bridge (P4a) — head + intro + "Angst = Stress" equation + caption.
   Pair centered. blockquote = the two teal-soft equation boxes (two <strong>). */
.ms-sdc--normal.stress-bridge .ms-sdc__inner{ max-width:900px; }
.ms-sdc.stress-bridge .ms-sdc__body > p{
  color:#262626; font-size:18px; line-height:1.6; margin:0 auto 18px; max-width:780px;
}
.ms-sdc.stress-bridge .ms-sdc__body blockquote{
  max-width:600px; margin:8px auto 0; padding:0; border:0; background:none;
  display:flex; align-items:stretch; justify-content:center; gap:16px;
}
.ms-sdc.stress-bridge .ms-sdc__body blockquote strong{
  flex:1; background:#E4F1EF; border:1px solid #CDE3DF; border-radius:16px; padding:22px 18px;
  text-align:center; font-family:var(--ms-display); font-weight:600; font-size:26px;
  color:#005E60; line-height:1.1;
}
.ms-sdc.stress-bridge .ms-sdc__body blockquote strong:last-of-type{ order:2; }
/* the "=" is a REAL flex item BETWEEN the two boxes (AI .mech-eq .eqs), not absolute —
   so the boxes keep the AI's 16px (12 mobile) gap instead of spreading. */
.ms-sdc.stress-bridge .ms-sdc__body blockquote::after{
  content:"="; order:1; align-self:center; flex:0 0 auto;
  font-family:var(--ms-display); font-weight:600; font-size:34px; color:#007375;
}
.ms-sdc.stress-bridge .ms-sdc__body blockquote + p{
  font-family:var(--ms-display); font-weight:600; font-size:22px; color:#141414;
  margin:22px auto 0; max-width:640px; text-align:center;
}
@media (max-width:640px){
  /* AI: `.mech-eq{gap:12px; padding:0 20px}` on mobile — narrows the boxes to match. */
  .ms-sdc.stress-bridge .ms-sdc__body blockquote{ gap:12px; padding-left:20px; padding-right:20px; }
}

/* ---------- mech-cards (P4b) — 2 icon cards + italic note. Pair centered.
   Icons baked by list position (teal-dark stroke on teal-soft medallion). */
.ms-sdc--normal.mech-cards .ms-sdc__inner{ max-width:900px; }
.ms-sdc.ms-sdc.mech-cards ul{
  list-style:none; margin:0 auto; padding:0; max-width:900px; text-align:left;
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
}
.ms-sdc.ms-sdc.mech-cards ul > li{
  margin:0; padding:30px; position:static; background:#fff; border:1px solid #E9E9E6;
  border-radius:16px; color:#262626; font-size:18px; line-height:1.55;
}
.ms-sdc.ms-sdc.mech-cards ul > li::before{
  content:""; display:block; width:48px; height:48px; border-radius:12px; margin:0 0 14px;
  background-color:#E4F1EF; background-repeat:no-repeat; background-position:center; background-size:24px 24px;
}
.ms-sdc.mech-cards ul > li:nth-child(1)::before{
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005E60' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M9 3a3 3 0 0 0-3 3v1a3 3 0 0 0 0 6v1a3 3 0 0 0 6 0V6a3 3 0 0 0-3-3z'/><path d='M15 6a3 3 0 0 1 3 3v1a3 3 0 0 1 0 6v0a3 3 0 0 1-6 0'/></svg>");
}
.ms-sdc.mech-cards ul > li:nth-child(2)::before{
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005E60' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5a3 3 0 0 0-6 0 3 3 0 0 0-3 3 3 3 0 0 0 1.5 2.6A3 3 0 0 0 6 16a3 3 0 0 0 6 0z'/><path d='M12 5a3 3 0 0 1 6 0 3 3 0 0 1 3 3 3 3 0 0 1-1.5 2.6A3 3 0 0 1 18 16a3 3 0 0 1-6 0z'/></svg>");
}
.ms-sdc.mech-cards ul > li strong{
  display:block; font-family:var(--ms-display); font-weight:600; font-size:19px;
  color:#141414; line-height:1.14; margin:0 0 10px;
}
.ms-sdc.mech-cards .ms-sdc__body > p{
  max-width:760px; margin:28px auto 0; text-align:center; color:#262626; font-size:15px; font-style:italic;
}
@media (max-width:900px){ .ms-sdc.ms-sdc.mech-cards ul{ grid-template-columns:1fr; } }

/* ---------- measure-steps (P6) — <ol> of numbered rows (rounded-square teal badge).
   Pair centered. Distinct from cards-list (2-col "01" badge). */
.ms-sdc--normal.measure-steps .ms-sdc__inner{ max-width:800px; }
.ms-sdc.measure-steps .ms-sdc__body > p{
  color:#262626; font-size:18px; line-height:1.6; margin:0 auto; max-width:640px;
}
.ms-sdc.ms-sdc.measure-steps ol{
  list-style:none; counter-reset:mstep; margin:44px 0 0; padding:0; text-align:left;
}
.ms-sdc.ms-sdc.measure-steps ol > li{
  counter-increment:mstep; margin:0; padding:26px 0 26px 70px; position:relative;
  border-top:0; border-bottom:1px solid #E9E9E6; color:#262626; font-size:18px; line-height:1.55;
}
/* Hairline BETWEEN steps only. The base `.ms-sdc.ms-sdc ol > li` adds a border-top
   (killed above); the last step drops its bottom line so there's no trailing rule. */
.ms-sdc.ms-sdc.measure-steps ol > li:last-child{ border-bottom:0; }
.ms-sdc.ms-sdc.measure-steps ol > li::before{
  content:counter(mstep); position:absolute; left:0; top:26px;
  width:46px; height:46px; border-radius:12px; background:#fff; border:1.5px solid #BFE4DF;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--ms-display); font-weight:600; font-size:20px; color:#007375;
}
.ms-sdc.measure-steps ol > li strong{
  display:block; font-family:var(--ms-display); font-weight:600; font-size:19px;
  color:#141414; line-height:1.14; margin:0 0 5px;
}
@media (max-width:640px){
  .ms-sdc.ms-sdc.measure-steps ol > li{ padding:22px 0 22px 58px; }
  .ms-sdc.ms-sdc.measure-steps ol > li::before{ width:42px; height:42px; font-size:18px; top:22px; }
}

/* ---------- regions-table (P7) — dark 3-col table (region/function/change) + sig-note.
   Pair on-dark centered. <ul>; first <li> = head row; strong=region, em=function. */
.ms-sdc--normal.regions-table .ms-sdc__inner{ max-width:880px; }
.ms-sdc.regions-table .ms-sdc__body > p:first-of-type{
  color:#EAF4F4; font-size:18px; line-height:1.6; margin:0 auto 44px; max-width:700px;
}
.ms-sdc.ms-sdc.regions-table ul{
  list-style:none; margin:0 auto; padding:0; max-width:880px; text-align:left;
  border-radius:16px; overflow:hidden; border:1px solid rgba(143,224,216,.18);
}
.ms-sdc.ms-sdc.regions-table ul > li{
  margin:0; padding:19px 26px; position:static; font-size:15.5px; color:#fff;
  display:grid; grid-template-columns:1.1fr 1.3fr 1.7fr; gap:20px; align-items:center;
  border-bottom:1px solid rgba(143,224,216,.12);
}
.ms-sdc.ms-sdc.regions-table ul > li:last-child{ border-bottom:0; }
.ms-sdc.ms-sdc.regions-table ul > li::before{ content:none; }
.ms-sdc.regions-table ul > li strong{ color:#fff; font-weight:600; }
.ms-sdc.regions-table ul > li em{ font-style:normal; color:#EAF4F4; }
.ms-sdc.regions-table ul > li:first-child{
  background:rgba(7,48,60,.5); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#C4DCDC;
}
.ms-sdc.regions-table ul > li:first-child strong,
.ms-sdc.regions-table ul > li:first-child em{
  color:#C4DCDC; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
}
.ms-sdc.ms-sdc.regions-table .ms-sdc__body > p:last-child{
  max-width:880px; margin:22px auto 0; text-align:center; color:#EAF4F4; font-size:14.5px;
}
.ms-sdc.regions-table .ms-sdc__body > p:last-child strong{ color:#8FE0D8; }
@media (max-width:900px){
  .ms-sdc.ms-sdc.regions-table ul > li{ grid-template-columns:1fr; gap:5px; }
  .ms-sdc.regions-table ul > li:first-child{ display:none; }
  .ms-sdc.regions-table ul > li em{ color:#C4DCDC; font-size:13px; }
}

/* ---------- compare-cards (P8) — 2 cards: plain "other" + teal-soft "us".
   Pair centered. <ul> of 2; em=tag, first strong=title, trailing text=body. */
.ms-sdc--normal.compare-cards .ms-sdc__inner{ max-width:880px; }
.ms-sdc.compare-cards .ms-sdc__body > p{
  color:#262626; font-size:18px; line-height:1.6; margin:0 auto 44px; max-width:700px;
}
.ms-sdc.ms-sdc.compare-cards ul{
  list-style:none; margin:0 auto; padding:0; max-width:880px; text-align:left;
  display:grid; grid-template-columns:1fr 1fr; gap:22px;
}
.ms-sdc.ms-sdc.compare-cards ul > li{
  margin:0; padding:30px 28px; position:static; border:1px solid #E9E9E6; border-radius:16px;
  background:#fff; color:#262626; font-size:17px; line-height:1.55;
}
.ms-sdc.ms-sdc.compare-cards ul > li::before{ content:none; }
.ms-sdc.compare-cards ul > li:nth-child(2){ border:1.5px solid #CDE3DF; background:#E4F1EF; }
.ms-sdc.compare-cards ul > li em{
  display:block; font-style:normal; font-family:'Archivo'; font-weight:600; font-size:12px;
  letter-spacing:.08em; text-transform:uppercase; margin:0 0 12px; color:#262626;
}
.ms-sdc.compare-cards ul > li:nth-child(2) em{ color:#007375; }
.ms-sdc.compare-cards ul > li strong:first-of-type{
  display:block; font-family:var(--ms-display); font-weight:600; font-size:19px;
  color:#141414; line-height:1.14; margin:0 0 9px;
}
@media (max-width:900px){ .ms-sdc.ms-sdc.compare-cards ul{ grid-template-columns:1fr; } }

/* ---------- review-cards (P9) — light testimonials (the light sibling of home-final).
   Pair centered. Same markup contract: <li><p>quote</p><p><img><strong>Name</strong><br>role</p></li>
   + trailing <p> rating (em=gold stars, mark=long tail). Avatars reuse the site files. */
.ms-sdc--normal.review-cards .ms-sdc__inner{ max-width:1032px; }
.ms-sdc.ms-sdc.review-cards ul{
  list-style:none; margin:42px 0 0; padding:0; text-align:left;
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.ms-sdc.ms-sdc.review-cards ul > li{
  margin:0; padding:26px; position:static; background:#fff; border:1px solid #E9E9E6; border-radius:16px;
}
.ms-sdc.ms-sdc.review-cards ul > li::before{
  content:"\2605\2605\2605\2605\2605"; display:block; color:#F2C14E; letter-spacing:2px;
  font-size:14px; margin:0 0 12px; position:static;
}
.ms-sdc.review-cards ul > li p{ font-size:18px; color:#1A1A1A; line-height:1.55; margin:0 0 18px; }
/* avatar row: float the image so the name STACKS over the role beside it (AI .tperson);
   a flex row would drop the <br> and put name+role side-by-side (wrong on mobile). */
.ms-sdc.review-cards ul > li p:last-child{
  margin:0; overflow:hidden; font-size:13.5px; color:#262626; line-height:1.4;
}
.ms-sdc.review-cards ul > li p:last-child img{
  float:left; width:48px; height:48px; border-radius:50%; object-fit:cover; margin-right:12px;
}
/* name = Recoleta ink (AI's 2nd .tcard .who block wins: display serif 16, #141414 — not teal) */
.ms-sdc.review-cards ul > li p:last-child strong{
  display:block; font-family:var(--ms-display); color:#141414; font-weight:600; font-size:16px; line-height:1.3;
}
.ms-sdc.review-cards .ms-sdc__body > p{ text-align:center; color:#262626; font-size:15px; margin:26px 0 0; }
.ms-sdc.review-cards .ms-sdc__body > p em{ font-style:normal; color:#F2C14E; letter-spacing:2px; }
.ms-sdc.review-cards .ms-sdc__body > p mark{ background:none; color:inherit; font:inherit; }
@media (max-width:900px){ .ms-sdc.ms-sdc.review-cards ul{ grid-template-columns:1fr; } }
/* NOTE: unlike the homepage gk-rating, the fMRT rating line keeps its full tail on
   mobile (the AI does NOT drop "· Hervorragend · über 60 Bewertungen" here). */

/* ---------- paper-download (P10) — study PDF card + fine print. Pair centered.
   blockquote = the card (baked doc medallion, strong=title, p=meta); CTA = field_simple_link. */
.ms-sdc--normal.paper-download .ms-sdc__inner{ max-width:900px; }
.ms-sdc.paper-download .ms-sdc__body > p:first-of-type{
  color:#262626; font-size:18px; line-height:1.6; margin:0 auto 44px; max-width:700px;
}
.ms-sdc.paper-download .ms-sdc__body blockquote{
  max-width:820px; margin:0 auto; text-align:left;
  background:#fff; border:1px solid #E9E9E6; border-radius:20px;
  box-shadow:0 20px 50px -34px rgba(11,60,73,.4); padding:28px 32px;
  display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:auto auto;
  column-gap:24px; align-items:center;
}
.ms-sdc.paper-download .ms-sdc__body blockquote::before{
  content:""; grid-column:1; grid-row:1 / 3; align-self:center;
  width:60px; height:60px; border-radius:15px; background-color:#E4F1EF;
  background-repeat:no-repeat; background-position:center; background-size:28px 28px;
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005E60' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M14 3v5h5'/><path d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><path d='M12 12v6'/><path d='M9 15l3 3 3-3'/></svg>");
}
.ms-sdc.paper-download .ms-sdc__body blockquote strong{
  grid-column:2; grid-row:1; align-self:end;
  display:block; font-family:var(--ms-display); font-weight:600; font-size:19px; color:#141414; margin:0 0 3px;
}
.ms-sdc.paper-download .ms-sdc__body blockquote p{
  grid-column:2; grid-row:2; align-self:start;
  font-family:'Archivo'; font-weight:400; color:#262626; font-size:15px; line-height:1.5; margin:0;
}
/* CTA = an untracked body <a> INSIDE the card, inline-right (AI .paperbox .btn) */
.ms-sdc.paper-download .ms-sdc__body blockquote a{
  grid-column:3; grid-row:1 / 3; align-self:center; justify-self:end;
  display:inline-flex; align-items:center; white-space:nowrap;
  background:#F3954A; color:#fff; font-family:'Archivo'; font-weight:700; font-size:18px; line-height:1.2;
  padding:17px 34px; border:0; border-radius:12px; text-decoration:none;
  box-shadow:0 8px 22px rgba(243,149,74,.38); transition:background .15s, transform .12s;
}
.ms-sdc.paper-download .ms-sdc__body blockquote a:hover{ background:#E67F32; color:#fff; transform:translateY(-1px); }
.ms-sdc.paper-download .ms-sdc__body > p:last-child{
  max-width:820px; margin:24px auto 0; text-align:center; color:#262626; font-size:14px; line-height:1.6;
}
@media (max-width:640px){
  .ms-sdc.paper-download .ms-sdc__body blockquote{
    grid-template-columns:1fr; text-align:center; justify-items:center; row-gap:4px; padding:26px;
  }
  .ms-sdc.paper-download .ms-sdc__body blockquote::before{ grid-column:1; grid-row:auto; margin:0 0 10px; }
  .ms-sdc.paper-download .ms-sdc__body blockquote strong{ grid-column:1; grid-row:auto; align-self:auto; }
  .ms-sdc.paper-download .ms-sdc__body blockquote p{ grid-column:1; grid-row:auto; align-self:auto; }
  .ms-sdc.paper-download .ms-sdc__body blockquote a{
    grid-column:1; grid-row:auto; justify-self:center; margin-top:14px; width:100%; justify-content:center;
  }
}

/* ====================================================================
   ÜBER UNS  (/ueber-uns-v3 · node body class `lp-ueberuns`)
   Reuses the `normal` SDC. Flags: head-center · lead-20 · team-cards ·
   trust-badges (+ reused study-hero / centered / on-dark / cta-orange).
   ==================================================================== */

/* Page accent: heading <em> = the design `.accent` word.
   teal on light bands, mint on dark bands. (mirrors the lp-fmrt rule) */
.lp-ueberuns .ms-sdc h1 em,
.lp-ueberuns .ms-sdc h2 em { font-style:normal; color:#007375; }
.lp-ueberuns .ms-sdc.on-dark h1 em,
.lp-ueberuns .ms-sdc.on-dark h2 em { color:#8FE0D8; }

/* Inner column = the design's `.narrow` 820px (SDC default caps at 760, which
   made section titles wrap + narrowed the team grid). Hero keeps its own 860. */
.lp-ueberuns .ms-sdc__inner { max-width:820px; }

/* Body <p> = 18px at EVERY width incl. mobile (SDC default drops to 16/17 on
   small screens). Hero lead (study-hero) and the team-card bio keep their own
   sizes (higher-specificity / !important rules win). */
.lp-ueberuns .ms-sdc:not(.study-hero) p { font-size:18px; }

/* --------------------------------------------------------------------
   lead-20 — first body <p> = the design's lead paragraph: 20px desktop,
   18px ≤640 (mobile). Every other <p> stays the 18px body size.
   Used by About + Apps. -------------------------------------------- */
.ms-sdc.lead-20 .ms-sdc__body > p:first-of-type { font-size:20px; line-height:1.6; }
@media (max-width:640px){
  .ms-sdc.lead-20 .ms-sdc__body > p:first-of-type { font-size:18px; }
}

/* --------------------------------------------------------------------
   head-center — centre the leading <h2> and drop its divider, but keep
   body <p> left-aligned (design's centred section-head over left body).
   -------------------------------------------------------------------- */
.ms-sdc.head-center .ms-sdc__body > h2:first-child { text-align:center; margin-bottom:34px !important; }
.ms-sdc.head-center h2::after { display:none !important; }
@media (max-width:640px){
  .ms-sdc.head-center .ms-sdc__body > h2:first-child { margin-bottom:16px !important; }
}

/* --------------------------------------------------------------------
   team-cards — <ul> → member cards. 2-col (960 max) → 1-col ≤860.
   White card r22, 3:2 photo on top (<img> or baked "Foto folgt" box),
   Recoleta <h3> name, teal <em> role, 16px muted bio, teal arrow link.
   Pair with `centered`. ---------------------------------------------- */
/* wider column so the 2-col grid reaches the design's ~466px cards (the 820px
   narrow inner would squeeze them). */
.ms-sdc.team-cards .ms-sdc__inner{ max-width:960px; }
.ms-sdc.team-cards .ms-sdc__body > ul{
  list-style:none; padding:0; margin:26px auto 0; max-width:960px;
  display:grid; grid-template-columns:1fr 1fr; gap:28px;
}
.ms-sdc.team-cards .ms-sdc__body > ul > li{
  margin:0; padding:0; text-align:left; overflow:hidden;
  background:#fff; border:1px solid #E9E9E6; border-radius:22px;
  display:flex; flex-direction:column;
  box-shadow:0 3px 14px rgba(18,52,48,.05);
}
/* photo: real <img> — direct child (clean/import form) OR wrapped in a <p>
   (CKEditor 5 block-wraps the image and stamps width/height on save; height:auto
   neutralises the stamped height so the 3:2 crop wins in both forms). */
.ms-sdc.team-cards .ms-sdc__body > ul > li > img,
.ms-sdc.team-cards .ms-sdc__body > ul > li > p:first-child > img{
  display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; margin:0; border-radius:0;
}
/* the CKEditor photo-wrapper <p> must sit flush at the card top (no gutter/margin) */
.ms-sdc.team-cards .ms-sdc__body > ul > li > p:first-child{ margin:0; padding:0; }
/* photo pending: baked teal-soft box */
.ms-sdc.team-cards .ms-sdc__body > ul > li:not(:has(img))::before{
  content:"Foto folgt"; display:flex; align-items:center; justify-content:center;
  aspect-ratio:3/2; background:#E4F1EF; color:#005E60; font-size:13px; letter-spacing:.03em;
}
/* content padding (no wrapper div available to editors) */
.ms-sdc.team-cards .ms-sdc__body > ul > li > h3,
.ms-sdc.team-cards .ms-sdc__body > ul > li > p{ padding-left:30px; padding-right:30px; }
.ms-sdc.team-cards .ms-sdc__body > ul > li > h3{
  font-family:'Recoleta' !important; font-weight:600 !important; font-size:22px !important;
  color:#141414 !important; line-height:1.2 !important; margin:28px 0 4px !important;
}
/* role = the <p> right after the name; its <em> = teal bold, non-italic */
.ms-sdc.team-cards .ms-sdc__body > ul > li > h3 + p{ margin:0 0 14px; }
.ms-sdc.team-cards .ms-sdc__body > ul > li > h3 + p em{
  font-style:normal; color:#007375; font-weight:700; font-size:14px; letter-spacing:.01em;
}
/* bio = the <p> after the role; grows so the "more" link sits card-bottom */
.ms-sdc.team-cards .ms-sdc__body > ul > li > h3 + p + p{
  color:#262626; font-size:16px !important; line-height:1.55; margin:0 0 16px; flex-grow:1;
}
/* last <p> anchors card bottom padding; "more" link = teal arrow */
.ms-sdc.team-cards .ms-sdc__body > ul > li > p:last-child{ margin-bottom:0; padding-bottom:30px; }
.ms-sdc.team-cards .ms-sdc__body > ul > li > p a{ color:#007375; font-weight:700; font-size:15px; }
.ms-sdc.team-cards .ms-sdc__body > ul > li > p a:hover{ color:#005E60; }
@media (max-width:860px){
  .ms-sdc.team-cards .ms-sdc__body > ul{ grid-template-columns:1fr; max-width:440px; }
}

/* --------------------------------------------------------------------
   trust-badges — <ul> → inline centred mint pills, baked icon per
   position (★ / check-circle / check). Pair `on-dark centered`.
   -------------------------------------------------------------------- */
.ms-sdc.trust-badges .ms-sdc__body > ul{
  list-style:none; padding:0; margin:30px 0 0;
  display:flex; flex-wrap:wrap; gap:14px; justify-content:center;
}
.ms-sdc.trust-badges .ms-sdc__body > ul > li{
  display:inline-flex; align-items:center; gap:9px; margin:0;
  background:rgba(143,224,216,.1); border:1px solid rgba(143,224,216,.3);
  color:#8FE0D8; padding:10px 18px; border-radius:999px; font-size:14px; font-weight:700;
}
.ms-sdc.trust-badges .ms-sdc__body > ul > li::before{
  content:""; width:16px; height:16px; flex:none; background:center/contain no-repeat;
}
.ms-sdc.trust-badges .ms-sdc__body > ul > li:nth-child(1)::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FE0D8' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M12 2l2.4 7.4H22l-6 4.6 2.3 7.4L12 17l-6.3 4.4L8 14 2 9.4h7.6z'/%3E%3C/svg%3E");
}
.ms-sdc.trust-badges .ms-sdc__body > ul > li:nth-child(2)::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FE0D8' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
}
.ms-sdc.trust-badges .ms-sdc__body > ul > li:nth-child(3)::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FE0D8' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E");
}

/* ====================================================================
   UNTERNEHMEN  (/unternehmen · node body class `lp-unternehmen`)
   Source: unternehmen-export.html · Mapping: unternehmen/unternehmen_Mapping.md.
   Reuses the `normal` SDC (12 bands) + `hero` SDC (1, see hero.css unt-final).
   NEW flags (all here, scoped .ms-sdc.<flag>; page-scope under .lp-unternehmen):
     hero-trust · lead-statement · stat-cards · cost-card · contrast-cards ·
     fit-cards · method-cards · report-card · test-card · soft-quote
   Reuses: study-hero · measure-steps · centered · on-dark · cta-orange · lead-20.
   Palette petrol #115759, petrol-d #0C4143, mint #8FE0D8, teal #007375,
   teal-dark #005E60, teal-soft #E4F1EF, coral/warn #E8896F, orange CTA #F3954A,
   grey #EEF0F1, ink #141414, muted #262626. Breakpoints 900 / 820 / 640.
   Appended last → equal-specificity ties win on source order.
   ==================================================================== */

/* ---------- page-scope resets (body.lp-unternehmen) — style ONLY .ms-sdc ---------- */
.lp-unternehmen .ms-sdc{ font-family:'Archivo'; }
.lp-unternehmen .ms-sdc h2::after{ content:none !important; }
.lp-unternehmen .ms-sdc p{ font-size:18px; line-height:1.65; }
/* section <h2>: Recoleta 26→40, no divider, ink; on-dark → white */
.lp-unternehmen .ms-sdc h2{
  font-family:var(--ms-display) !important; font-weight:600 !important; color:#141414 !important;
  font-size:clamp(26px,4vw,40px) !important; line-height:1.14 !important;
  letter-spacing:-.3px !important; margin:0 0 16px !important;
}
.lp-unternehmen .ms-sdc.on-dark h2{ color:#fff !important; }
/* accent <em> in a heading: teal on light, mint on dark; coral in problem bands */
.lp-unternehmen .ms-sdc h1 em, .lp-unternehmen .ms-sdc h2 em{ font-style:normal; color:#007375; }
.lp-unternehmen .ms-sdc.on-dark h1 em, .lp-unternehmen .ms-sdc.on-dark h2 em{ color:#8FE0D8; }
.lp-unternehmen .ms-sdc.stat-cards h2 em,
.lp-unternehmen .ms-sdc.ripple-org h2 em,
.lp-unternehmen .ms-sdc.contrast-cards h2 em{ color:#E8896F !important; }
/* centred section-head width caps (design .section-head 740 / intro 660).
   margin auto needs !important to beat the page h2 rule's `margin:0 0 16px !important`,
   otherwise the capped block sits flush-left inside the wider inner. */
.lp-unternehmen .ms-sdc.centered .ms-sdc__body > h2{ max-width:760px; margin-left:auto !important; margin-right:auto !important; }
.lp-unternehmen .ms-sdc.centered .ms-sdc__body > h2 + p{ max-width:660px; margin-left:auto !important; margin-right:auto !important; }
/* section-head intro <p> (the p right after the leading h2) = 20px desktop / 18 mobile (D4) */
.lp-unternehmen .ms-sdc.stat-cards   .ms-sdc__body > h2 + p,
.lp-unternehmen .ms-sdc.ripple-org   .ms-sdc__body > h2 + p,
.lp-unternehmen .ms-sdc.contrast-cards .ms-sdc__body > h2 + p,
.lp-unternehmen .ms-sdc.fit-cards    .ms-sdc__body > h2 + p,
.lp-unternehmen .ms-sdc.measure-steps .ms-sdc__body > h2 + p,
.lp-unternehmen .ms-sdc.method-cards .ms-sdc__body > h2 + p{ font-size:20px; line-height:1.6; }
@media (max-width:640px){
  .lp-unternehmen .ms-sdc.stat-cards   .ms-sdc__body > h2 + p,
  .lp-unternehmen .ms-sdc.ripple-org   .ms-sdc__body > h2 + p,
  .lp-unternehmen .ms-sdc.contrast-cards .ms-sdc__body > h2 + p,
  .lp-unternehmen .ms-sdc.fit-cards    .ms-sdc__body > h2 + p,
  .lp-unternehmen .ms-sdc.measure-steps .ms-sdc__body > h2 + p,
  .lp-unternehmen .ms-sdc.method-cards .ms-sdc__body > h2 + p{ font-size:18px; }
}

/* ---------- Band 1 · hero-trust — orange Simple-Link CTA + inline mint-icon
   trust row. Pairs with study-hero (h1/lead) + on-dark centered.
   The CTA is a tracked field_simple_link (links.md rule 1), rendered by the
   normal SDC in .ms-sdc__actions AFTER the body. To keep the design order
   (h1 → lead → button → trust), the body is display:contents so its children
   join the inner flex context, and the actions are ordered between the lead
   and the trust <ul>. ---------------------------------------------------- */
.lp-unternehmen .ms-sdc--normal.study-hero p{ max-width:660px; }
.ms-sdc.hero-trust .ms-sdc__inner{ display:flex; flex-direction:column; align-items:center; }
.ms-sdc.hero-trust .ms-sdc__body{ display:contents; }
.ms-sdc.hero-trust .ms-sdc__body > h1,
.ms-sdc.hero-trust .ms-sdc__body > p{ width:100%; }
.ms-sdc.hero-trust .ms-sdc__actions{ order:2; margin:32px 0 0; }
.ms-sdc.hero-trust .ms-sdc__link{ margin:0; }
.ms-sdc.hero-trust .ms-sdc__link a{
  display:inline-flex; align-items:center; gap:10px; white-space:nowrap !important;
  background:#F3954A !important; color:#fff !important;
  font-family:'Archivo' !important; font-weight:700 !important; font-size:18px !important; line-height:1.65 !important;
  padding:17px 34px !important; border:0 !important; border-radius:12px !important;
  box-shadow:0 8px 22px rgba(243,149,74,.38) !important; text-decoration:none !important; margin:0 !important;
  transition:background .18s, transform .12s, box-shadow .2s;
}
.ms-sdc.hero-trust .ms-sdc__link a:hover{
  background:#E67F32 !important; color:#fff !important;
  transform:translateY(-2px); box-shadow:0 12px 30px rgba(243,149,74,.5) !important;
}
/* mobile: full-width button that may wrap (matches the design .btn ≤640) */
@media (max-width:640px){
  .ms-sdc.hero-trust .ms-sdc__link{ width:100%; }
  .ms-sdc.hero-trust .ms-sdc__link a{ white-space:normal !important; width:100%; justify-content:center; }
}
.ms-sdc.hero-trust .ms-sdc__body > ul{
  order:3; list-style:none; padding:0; margin:30px 0 0;
  display:flex; flex-wrap:wrap; gap:26px; justify-content:center;
}
.ms-sdc.hero-trust .ms-sdc__body > ul > li{
  display:inline-flex; align-items:center; gap:8px; margin:0;
  color:#EAF4F4; font-size:14px; font-weight:400;
}
.ms-sdc.hero-trust .ms-sdc__body > ul > li::before{
  content:""; width:17px; height:17px; flex:none; background:center/contain no-repeat;
}
.ms-sdc.hero-trust .ms-sdc__body > ul > li:nth-child(1)::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FE0D8' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M12 2l2.4 7.4H22l-6 4.6 2.3 7.4L12 17l-6.3 4.4L8 14 2 9.4h7.6z'/%3E%3C/svg%3E");
}
.ms-sdc.hero-trust .ms-sdc__body > ul > li:nth-child(2)::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FE0D8' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
}
@media (max-width:640px){ .ms-sdc.hero-trust .ms-sdc__body p a{ width:100%; justify-content:center; } }

/* ---------- Band 2 · lead-statement — big Recoleta line + muted sub. Pair centered. */
.ms-sdc--normal.lead-statement .ms-sdc__inner{ max-width:900px; }
.ms-sdc.lead-statement .ms-sdc__body > p:first-child{
  font-family:var(--ms-display); font-weight:600; color:#141414;
  font-size:clamp(24px,3.2vw,34px); line-height:1.3; letter-spacing:-.01em;
  max-width:860px; margin:0 auto; text-align:center;
}
.ms-sdc.lead-statement .ms-sdc__body > p:first-child + p{
  color:#262626; font-size:20px; line-height:1.6; max-width:660px; margin:24px auto 0; text-align:center;
}
@media (max-width:640px){ .ms-sdc.lead-statement .ms-sdc__body > p:first-child + p{ font-size:18px; } }

/* ---------- Bands 3+4 · stat-cards — coral-number cards + source note.
   Light = 3-col white (band 3); on-dark = 2-col glass on petrol (band 4). */
.ms-sdc--normal.stat-cards .ms-sdc__inner{ max-width:1000px; }
.ms-sdc.ms-sdc.stat-cards ul{
  list-style:none; margin:44px auto 0; padding:0; text-align:left;
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.ms-sdc.ms-sdc.stat-cards ul > li{
  margin:0; padding:32px 30px; position:static;
  background:#fff; border:1px solid #E9E9E6; border-radius:20px;
  box-shadow:0 3px 14px rgba(18,52,48,.05); color:#262626; font-size:16px; line-height:1.55;
}
.ms-sdc.ms-sdc.stat-cards ul > li::before{ content:none; }
.ms-sdc.stat-cards ul > li em{
  display:block; font-style:normal; font-family:var(--ms-display); font-weight:600;
  font-size:52px; line-height:1; color:#E8896F; margin:0 0 10px;
}
.ms-sdc.stat-cards ul > li strong{
  display:block; font-family:var(--ms-display); font-weight:600; font-size:20px;
  color:#141414; line-height:1.14; margin:0 0 8px;
}
.ms-sdc.stat-cards .ms-sdc__body > p:last-child{
  text-align:center; color:#262626; font-size:13.5px; margin:28px auto 0; max-width:760px;
}
@media (max-width:900px){
  .ms-sdc.ms-sdc.stat-cards ul{ grid-template-columns:1fr; }
}

/* ---------- Band 4 · ripple-org — baked org-transfer diagram (left) + influence
   stat cards (right) + source note. Markup is a gated branch in normal.twig
   (renders only for this flag). Pair on-dark centered. Band bg petrol #115759.
   Reproduces the export's .orgwrap/.org/.orgnode/.rstat exactly. --------- */
.ms-sdc--normal.ripple-org .ms-sdc__inner{ max-width:960px; }
.ms-sdc.ripple-org .ms-sdc__orgwrap{
  max-width:900px; margin:44px auto 0; display:grid; grid-template-columns:1fr 1fr;
  gap:40px; align-items:center; text-align:left;
}
.ms-sdc.ripple-org .ms-org{ display:flex; flex-direction:column; align-items:center; }
.ms-sdc.ripple-org .ms-orgnode{ width:100%; max-width:300px; border-radius:16px; padding:20px 22px; text-align:center; }
.ms-sdc.ripple-org .ms-orgnode--leader{ background:rgba(232,137,111,.14); border:1px solid rgba(232,137,111,.55); }
.ms-sdc.ripple-org .ms-orgnode--team{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); }
.ms-sdc.ripple-org .ms-org-ic{ width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 10px; }
.ms-sdc.ripple-org .ms-orgnode--leader .ms-org-ic{ background:rgba(232,137,111,.2); }
.ms-sdc.ripple-org .ms-org-ic svg{ width:25px; height:25px; stroke:#E8896F; fill:none; stroke-width:2; }
.ms-sdc.ripple-org .ms-org-t{ display:block; font-family:var(--ms-display); font-weight:600; color:#fff; font-size:17px; line-height:1.2; }
.ms-sdc.ripple-org .ms-org-s{ display:block; margin-top:6px; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.ms-sdc.ripple-org .ms-orgnode--leader .ms-org-s{ color:#E8896F; }
.ms-sdc.ripple-org .ms-orgnode--team .ms-org-s{ color:#8FE0D8; }
.ms-sdc.ripple-org .ms-orgline{ width:2px; height:30px; background:rgba(255,255,255,.28); }
.ms-sdc.ripple-org .ms-avrow{ display:flex; gap:8px; justify-content:center; margin-top:12px; }
.ms-sdc.ripple-org .ms-av{ width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; }
.ms-sdc.ripple-org .ms-av svg{ width:18px; height:18px; stroke:#EAF4F4; fill:none; stroke-width:2; }
.ms-sdc.ripple-org .ms-influence{ display:flex; flex-direction:column; gap:20px; }
.ms-sdc.ripple-org .ms-rstat{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:18px; padding:26px 28px; text-align:left; }
.ms-sdc.ripple-org .ms-rstat-big{ display:block; font-family:var(--ms-display); font-weight:600; font-size:46px; color:#E8896F; line-height:1; margin-bottom:8px; }
.ms-sdc.ripple-org .ms-rstat-t{ display:block; font-family:var(--ms-display); font-weight:600; color:#fff; font-size:19px; line-height:1.2; margin-bottom:6px; }
.ms-sdc.ripple-org .ms-rstat-p{ display:block; color:#EAF4F4; font-size:15px; line-height:1.5; }
.ms-sdc.ripple-org .ms-src{ max-width:900px; margin:22px auto 0; text-align:center; color:#C4DCDC; font-size:13.5px; line-height:1.5; }
@media (max-width:760px){ .ms-sdc.ripple-org .ms-sdc__orgwrap{ grid-template-columns:1fr; gap:28px; } }

/* ---------- Band 5 · cost-card — single centred white card, huge coral number.
   Pair centered. Band bg grey #EEF0F1. -------------------------------- */
.ms-sdc--normal.cost-card .ms-sdc__inner{ max-width:900px; }
.ms-sdc.cost-card .ms-sdc__body{
  background:#fff; border:1px solid #E9E9E6; border-radius:22px;
  padding:clamp(32px,5vw,48px); text-align:center; box-shadow:0 8px 30px rgba(18,52,48,.07);
}
.ms-sdc.cost-card .ms-sdc__body > p:first-child{
  font-family:var(--ms-display); font-weight:600; color:#E8896F;
  font-size:clamp(48px,8vw,82px); line-height:1; letter-spacing:-.02em; margin:0;
}
.ms-sdc.cost-card .ms-sdc__body h3{
  font-family:var(--ms-display) !important; font-weight:600 !important; color:#141414 !important;
  font-size:24px !important; line-height:1.2 !important; margin:10px 0 14px !important;
}
.ms-sdc.cost-card .ms-sdc__body > p:last-child{
  color:#262626; font-size:18px; line-height:1.6; max-width:620px; margin:0 auto;
}

/* ---------- Band 6 · contrast-cards — intro text + 2 cards (✕ white / ✓ teal-soft,
   each = <em> badge + <strong> title + nested <ul>) + closing p. Pair centered. */
.ms-sdc--normal.contrast-cards .ms-sdc__inner{ max-width:900px; }
.ms-sdc.contrast-cards .ms-sdc__body > p{ text-align:center; color:#262626; max-width:820px; margin:0 auto 18px; }
.ms-sdc.contrast-cards .ms-sdc__body > ul{
  list-style:none; margin:40px auto 0; padding:0; max-width:900px; text-align:left;
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
}
.ms-sdc.contrast-cards .ms-sdc__body > ul > li{
  margin:0; padding:30px 28px; border-radius:20px; box-shadow:0 3px 14px rgba(18,52,48,.05);
  background:#fff; border:1px solid #E9E9E6;
}
.ms-sdc.contrast-cards .ms-sdc__body > ul > li:nth-child(2){ background:#E4F1EF; border:1px solid #CDE3DF; }
.ms-sdc.contrast-cards .ms-sdc__body > ul > li::before{ content:none; }
.ms-sdc.contrast-cards .ms-sdc__body > ul > li em{
  display:inline-flex; align-items:center; gap:8px; font-style:normal;
  font-size:12.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin:0 0 16px;
}
.ms-sdc.contrast-cards .ms-sdc__body > ul > li:nth-child(1) em{ color:#B07A4E; }
.ms-sdc.contrast-cards .ms-sdc__body > ul > li:nth-child(2) em{ color:#005E60; }
.ms-sdc.contrast-cards .ms-sdc__body > ul > li em::before{
  content:"\2715"; width:22px; height:22px; border-radius:50%; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:13px; color:#fff; background:#C89478;
}
.ms-sdc.contrast-cards .ms-sdc__body > ul > li:nth-child(2) em::before{ content:"\2713"; background:#007375; }
.ms-sdc.contrast-cards .ms-sdc__body > ul > li strong{
  display:block; font-family:var(--ms-display); font-weight:600; font-size:19px;
  color:#141414; line-height:1.14; margin:0 0 14px;
}
.ms-sdc.contrast-cards .ms-sdc__body > ul > li ul{
  list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px;
}
.ms-sdc.contrast-cards .ms-sdc__body > ul > li ul > li{
  position:relative; padding-left:26px; font-size:16px; line-height:1.5; color:#262626; margin:0;
}
.ms-sdc.contrast-cards .ms-sdc__body > ul > li ul > li::before{ position:absolute; left:0; top:1px; font-weight:700; }
.ms-sdc.contrast-cards .ms-sdc__body > ul > li:nth-child(1) ul > li::before{ content:"\2715"; color:#C89478; }
.ms-sdc.contrast-cards .ms-sdc__body > ul > li:nth-child(2) ul > li::before{ content:"\2713"; color:#007375; }
.ms-sdc.contrast-cards .ms-sdc__body > ul + p{
  text-align:center; color:#262626; font-size:18px; max-width:760px; margin:32px auto 0;
}
@media (max-width:640px){ .ms-sdc.contrast-cards .ms-sdc__body > ul{ grid-template-columns:1fr; } }

/* ---------- Band 8 · fit-cards — 2 cards (✓ teal-soft / – grey, each = <strong>
   title w/ leading marker + nested <ul>) + lead-20 post-list p + muted p. Pair centered. */
.ms-sdc--normal.fit-cards .ms-sdc__inner{ max-width:900px; }
.ms-sdc.fit-cards .ms-sdc__body > ul{
  list-style:none; margin:34px auto 30px; padding:0; max-width:900px; text-align:left;
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
}
.ms-sdc.fit-cards .ms-sdc__body > ul > li{
  margin:0; padding:30px 28px; border-radius:20px;
  background:#E4F1EF; border:1px solid #CDE3DF;
}
.ms-sdc.fit-cards .ms-sdc__body > ul > li:nth-child(2){ background:#EEF0F1; border:1px solid #E9E9E6; }
.ms-sdc.fit-cards .ms-sdc__body > ul > li::before{ content:none; }
.ms-sdc.fit-cards .ms-sdc__body > ul > li strong{
  display:flex; align-items:center; gap:10px;
  font-family:var(--ms-display); font-weight:600; font-size:19px; color:#141414; line-height:1.14; margin:0 0 16px;
}
.ms-sdc.fit-cards .ms-sdc__body > ul > li strong::before{
  content:"\2713"; width:26px; height:26px; border-radius:50%; flex:none;
  display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:15px; background:#007375;
}
.ms-sdc.fit-cards .ms-sdc__body > ul > li:nth-child(2) strong::before{ content:"\2013"; background:#A9B4B4; }
.ms-sdc.fit-cards .ms-sdc__body > ul > li ul{
  list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px;
}
.ms-sdc.fit-cards .ms-sdc__body > ul > li ul > li{
  position:relative; padding-left:26px; font-size:16px; line-height:1.5; color:#262626; margin:0;
}
.ms-sdc.fit-cards .ms-sdc__body > ul > li ul > li::before{ position:absolute; left:0; top:1px; font-weight:700; }
.ms-sdc.fit-cards .ms-sdc__body > ul > li:nth-child(1) ul > li::before{ content:"\2713"; color:#007375; }
.ms-sdc.fit-cards .ms-sdc__body > ul > li:nth-child(2) ul > li::before{ content:"\2013"; color:#A9B4B4; }
.ms-sdc.fit-cards .ms-sdc__body > ul + p{ font-size:20px; line-height:1.6; color:#262626; text-align:center; max-width:820px; margin:0 auto; }
.ms-sdc.fit-cards .ms-sdc__body > ul + p + p{ font-size:18px; line-height:1.6; color:#262626; text-align:left; max-width:820px; margin:18px auto 0; }
@media (max-width:640px){
  .ms-sdc.fit-cards .ms-sdc__body > ul{ grid-template-columns:1fr; }
  .ms-sdc.fit-cards .ms-sdc__body > ul + p{ font-size:18px; }
}

/* ---------- Band 9 · method-cards — 2-col dark icon cards + src link. Pair on-dark centered. */
.ms-sdc--normal.method-cards .ms-sdc__inner{ max-width:960px; }
.ms-sdc.ms-sdc.method-cards ul{
  list-style:none; margin:0 auto; padding:0; max-width:760px; text-align:center;
  display:grid; grid-template-columns:1fr 1fr; gap:22px;
}
.ms-sdc.ms-sdc.method-cards ul > li{
  margin:0; padding:32px 30px; position:static; text-align:center;
  background:rgba(255,255,255,.06); border:1px solid rgba(143,224,216,.22); border-radius:18px;
  color:#EAF4F4; font-size:16px; line-height:1.55;
}
.ms-sdc.ms-sdc.method-cards ul > li::before{
  content:""; display:block; width:56px; height:56px; border-radius:15px; margin:0 auto 18px;
  background-color:rgba(143,224,216,.14); background-repeat:no-repeat; background-position:center; background-size:27px 27px;
}
.ms-sdc.method-cards ul > li:nth-child(1)::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FE0D8' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
}
.ms-sdc.method-cards ul > li:nth-child(2)::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FE0D8' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M12 2l2.4 7.4H22l-6 4.6 2.3 7.4L12 17l-6.3 4.4L8 14 2 9.4h7.6z'/%3E%3C/svg%3E");
}
.ms-sdc.method-cards ul > li strong{
  display:block; font-family:var(--ms-display); font-weight:600; font-size:19px; color:#fff; line-height:1.14; margin:0 0 8px;
}
.ms-sdc.method-cards .ms-sdc__body > p:last-child{ text-align:center; margin:26px 0 0; font-size:14px; color:#EAF4F4; }
.ms-sdc.method-cards .ms-sdc__body > p:last-child a{ color:#8FE0D8 !important; font-weight:700; }
@media (max-width:900px){ .ms-sdc.ms-sdc.method-cards ul{ grid-template-columns:1fr; } }

/* ---------- Band 10 · report-card — petrol card, copy left + Simple-Link CTA right.
   Pair on-dark. Band bg white. CTA = field_simple_link (cta-orange). ---- */
.ms-sdc--normal.report-card .ms-sdc__inner{
  max-width:920px; background:#115759; border-radius:22px;
  padding:clamp(32px,4vw,46px); box-shadow:0 8px 30px rgba(18,52,48,.10);
  display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center;
}
.ms-sdc.report-card .ms-sdc__body{ min-width:0; }
.ms-sdc.report-card .ms-sdc__body h4{ color:#8FE0D8 !important; margin:0 0 12px !important; }
.ms-sdc.report-card .ms-sdc__body h3{
  font-family:var(--ms-display) !important; font-weight:600 !important; color:#fff !important;
  font-size:26px !important; line-height:1.14 !important; margin:0 0 12px !important;
}
.ms-sdc.report-card .ms-sdc__body p{ color:#EAF4F4; font-size:16px !important; line-height:1.6; margin:0; max-width:540px; }
.ms-sdc.report-card .ms-sdc__actions{ margin:0; }
.ms-sdc.report-card .ms-sdc__link a{ white-space:nowrap; }
@media (max-width:900px){
  .ms-sdc--normal.report-card .ms-sdc__inner{ grid-template-columns:1fr; text-align:center; gap:26px; }
  .ms-sdc.report-card .ms-sdc__body p{ margin:0 auto; }
}

/* ---------- Band 11 · test-card — white card, single col, left-aligned + CTA.
   Band bg grey #EEF0F1. CTA = field_simple_link (cta-orange). ---------- */
.ms-sdc--normal.test-card .ms-sdc__inner{
  max-width:940px; background:#fff; border:1px solid #E9E9E6; border-radius:22px;
  padding:clamp(32px,4vw,46px); box-shadow:0 8px 30px rgba(18,52,48,.07);
}
.ms-sdc.test-card .ms-sdc__body h2{
  font-size:clamp(26px,3.4vw,34px) !important; margin:0 0 14px !important; text-align:left !important;
}
.ms-sdc.test-card .ms-sdc__body p{ color:#262626; font-size:18px !important; line-height:1.6; max-width:680px; margin:0 0 12px; }
.ms-sdc.test-card .ms-sdc__body p:last-child{ font-size:15px !important; color:#262626; }
.ms-sdc.test-card .ms-sdc__body p em{ font-style:italic; }
.ms-sdc.test-card .ms-sdc__actions{ margin:18px 0 0; text-align:left; }

/* ---------- Band 12 · soft-quote — teal-soft card, Recoleta quote + muted p.
   Pair centered. Band bg white. -------------------------------------- */
.ms-sdc--normal.soft-quote .ms-sdc__inner{ max-width:820px; }
.ms-sdc.soft-quote .ms-sdc__body{
  background:#E4F1EF; border:1px solid #CDE3DF; border-radius:22px;
  padding:clamp(34px,4vw,48px); text-align:center;
}
.ms-sdc.soft-quote .ms-sdc__body > p:first-child{
  font-family:var(--ms-display); font-weight:600; color:#141414;
  font-size:clamp(23px,3vw,32px); line-height:1.35; letter-spacing:-.01em; margin:0 0 18px;
}
.ms-sdc.soft-quote .ms-sdc__body > p:first-child + p{ color:#262626; font-size:18px; line-height:1.6; margin:0; }

/* ---------- Band 7 · measure-steps badge tweak (reused SDC flag) — match the
   design's teal-soft rounded-square badge (base ships teal-fill + mint border).
   Scoped to .lp-unternehmen so fMRT P6 stays byte-identical. -------------- */
.lp-unternehmen .ms-sdc.ms-sdc.measure-steps ol > li::before{
  background:#E4F1EF; border:1px solid #CDE3DF; color:#005E60;
  width:52px; height:52px; border-radius:14px; font-size:22px;
}
.lp-unternehmen .ms-sdc.ms-sdc.measure-steps ol > li{ padding:26px 0 26px 76px; }
/* step title = design .chain-step h3 (20px, was 19px on the reused flag) */
.lp-unternehmen .ms-sdc.measure-steps ol > li strong{ font-size:20px; }
.lp-unternehmen .ms-sdc.measure-steps .ms-sdc__body > ol + p{
  text-align:center; font-size:16px; color:#262626; max-width:820px; margin:32px auto 0;
}
@media (max-width:640px){
  .lp-unternehmen .ms-sdc.ms-sdc.measure-steps ol > li{ padding:22px 0 22px 62px; }
  .lp-unternehmen .ms-sdc.ms-sdc.measure-steps ol > li::before{ width:46px; height:46px; font-size:20px; }
}