/**
 * bootsass:hero — two-column hero. Scoped under .ms-sdc--hero.
 * Matches the AI hero (sizes, dek, byline, image heights, the ≥1040 grid,
 * the ≥1280 width). Overrides ".landing-page h1 {text-align:center}".
 */
.ms-sdc--hero .ms-sdc__copy { text-align: left; }

/* Main title — left, Recoleta, white. */
.ms-sdc--hero .ms-sdc__copy h1 {
  font-family: var(--ms-display) !important;
  font-weight: 600 !important;
  font-size: 35px !important;
  line-height: 1.13 !important;
  letter-spacing: -0.005em !important;
  color: #fff !important;
  text-align: left !important;
  margin: 0 0 18px !important;
  text-wrap: balance;
}
/* Eyebrow */
.ms-sdc--hero .ms-sdc__copy h4 { color: var(--ms-teal-light) !important; }

/* Dek (h3) — italic display, teal. No divider on the hero. */
.ms-sdc--hero .ms-sdc__copy h3 {
  font-family: var(--ms-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 20px !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  color: var(--ms-teal-light) !important;
  margin: 0 0 24px !important;
}
.ms-sdc--hero .ms-sdc__copy h3::after { content: none; }

/* Byline (h5) */
.ms-sdc--hero .ms-sdc__copy h5 {
  color: rgba(255,255,255,0.6); font-size: 13px;
  padding-bottom: 26px; border-bottom: 1px solid rgba(255,255,255,0.16); margin: 0 0 8px;
}

.ms-sdc--hero .ms-sdc__media { margin: 26px 0 0; }
.ms-sdc--hero .ms-sdc__media img { width: 100%; height: 300px; object-fit: cover; }

@media (max-width: 420px) {
  .ms-sdc--hero .ms-sdc__copy h1 { font-size: 30px !important; }
}

@media (min-width: 720px) {
  .ms-sdc--hero .ms-sdc__copy h1 { font-size: 48px !important; line-height: 1.08 !important; }
  .ms-sdc--hero .ms-sdc__copy h3 { font-size: 24px !important; margin-bottom: 28px !important; }
  .ms-sdc--hero .ms-sdc__copy h5 { font-size: 14px; padding-bottom: 0; border-bottom: 0; }
  .ms-sdc--hero .ms-sdc__media img { height: 420px; }
}

@media (min-width: 1040px) {
  .ms-sdc--hero .ms-sdc__inner {
    max-width: 1120px;
    display: grid; grid-template-columns: 1.02fr 1fr; gap: 64px; align-items: stretch;
  }
  .ms-sdc--hero .ms-sdc__copy { align-self: center; }
  .ms-sdc--hero .ms-sdc__copy h1 { font-size: 54px !important; margin-bottom: 20px !important; }
  .ms-sdc--hero .ms-sdc__copy h3 { font-size: 26px !important; }
  .ms-sdc--hero .ms-sdc__media { margin: 0; }
  .ms-sdc--hero .ms-sdc__media img { height: auto; min-height: 480px; }
}

@media (min-width: 1280px) {
  .ms-sdc--hero .ms-sdc__inner { max-width: 1200px; }
}

/* =====================================================================
   `dark-promo` FLAG — dark/gold promo restyle of the hero (REUSABLE).
   ---------------------------------------------------------------------
   Activated by css_tag `dark-promo` on a hero band. Self-contained: it
   declares its own palette + fonts on the flag root, so it works on ANY
   dark page that adds this flag (pair with `on-dark` and give the page a
   dark background, e.g. a body class). The right-hand visual is a single
   editor image (field_image) — no mockup chrome is reproduced in CSS.
   Breakpoints: 2-col >=861px, stacked (image on top) <=860px.
   Appended AFTER the base hero rules so it wins on equal specificity;
   the extra `.dark-promo` class also raises specificity over the theme.
   ===================================================================== */
.ms-sdc--hero.dark-promo{
  --rg-mint:#8FE0D8; --rg-gold:#F2C14E; --rg-muted:#CFE6E6;
  --rg-sans:'Archivo';
  --rg-display:'Recoleta';
}
.ms-sdc--hero.dark-promo,
.ms-sdc--hero.dark-promo .ms-sdc__copy{ font-family:var(--rg-sans); }
.ms-sdc--hero.dark-promo .ms-sdc__copy{ text-align:left; }
.ms-sdc--hero.dark-promo .ms-sdc__inner{ max-width:1080px; margin:0 auto; padding: 0 24px;}
/* Override the base 48-64px gutters at wider viewports — hero uses 24px throughout */
.ms-sdc--hero.dark-promo{ padding-left:20px !important; padding-right:20px !important; }

/* Eyebrow (h4 / mark) — mint, uppercase, gold dash (= AI .eyebrow) */
.ms-sdc--hero.dark-promo .ms-sdc__copy h4,
.ms-sdc--hero.dark-promo .ms-sdc__copy mark.marker-yellow {
  font-family:var(--rg-sans) !important;
  font-weight:600 !important;
  font-size:12.5px !important;
  line-height:1.4 !important;
  letter-spacing:2px !important;
  text-transform:uppercase !important;
  color:var(--rg-mint) !important;
  margin:0 0 22px !important;
  background:none; display:inline-flex; align-items:center; gap:9px;
}
.ms-sdc--hero.dark-promo .ms-sdc__copy h4::before,
.ms-sdc--hero.dark-promo .ms-sdc__copy mark.marker-yellow::before{
  content:""; width:26px; height:1.5px; background:var(--rg-gold); display:inline-block;
}

/* Italic highlight line (h3 typed BEFORE the h1) = AI h1 .hk */
.ms-sdc--hero.dark-promo .ms-sdc__copy h3{
  font-family:var(--rg-display) !important;
  font-style:italic !important;
  font-weight:600 !important;
  font-size:24px !important;
  line-height:1.3 !important;
  letter-spacing:0 !important;
  color:var(--rg-mint) !important;
  margin:0 0 14px !important;
}
.ms-sdc--hero.dark-promo .ms-sdc__copy h3::after{ content:none; }

/* Main title (h1) — Recoleta, white (= AI h1) */
.ms-sdc--hero.dark-promo .ms-sdc__copy h1{
  font-family:var(--rg-display) !important;
  font-weight:700 !important;
  font-size:43px !important;
  line-height:1.16 !important;
  letter-spacing:-0.4px !important;
  color:#fff !important;
  text-align:left !important;
  margin:0 0 10px !important;
}

/* Lead paragraph (the single <p> = AI .sub) */
.ms-sdc--hero.dark-promo .ms-sdc__copy p{
  font-family:var(--rg-sans) !important;
  color:var(--rg-muted) !important;
  font-size:17px !important;
  line-height:1.55 !important;
  margin:18px 0 26px !important;
  max-width:520px;
}

/* Media region — single composed image, natural size, centred (no crop) */
.ms-sdc--hero.dark-promo .ms-sdc__media{ margin:35px 0 0; display:flex; justify-content:center; align-items:center; }
.ms-sdc--hero.dark-promo .ms-sdc__media picture{ display:block; width:100%; text-align:center; }
.ms-sdc--hero.dark-promo .ms-sdc__media img{
  width:100%; max-width:402px;
  height:auto !important;
  object-fit:initial !important;
  display:block; margin:0 auto; border-radius:0;
}

@media (min-width:861px){
  .ms-sdc--hero.dark-promo .ms-sdc__inner{
    display:grid; grid-template-columns:1.15fr 0.85fr; gap:48px; align-items:center;
  }
  .ms-sdc--hero.dark-promo .ms-sdc__copy{ align-self:center; max-width: 590px; }
}

@media (max-width:860px){
  .ms-sdc--hero.dark-promo .ms-sdc__inner{ display:flex; flex-direction:column; gap:0px; }
  .ms-sdc--hero.dark-promo .ms-sdc__media{ order:-1; margin-top:17.5px; }
  .ms-sdc--hero.dark-promo .ms-sdc__media img{ max-width:258px; }
  .ms-sdc--hero.dark-promo .ms-sdc__copy h4{ margin-bottom:16px !important; }
  .ms-sdc--hero.dark-promo .ms-sdc__copy h1{ font-size:30px !important; line-height:1.14 !important; }
  .ms-sdc--hero.dark-promo .ms-sdc__copy h3{ font-size:20px !important; margin-bottom:10px !important; }
  .ms-sdc--hero.dark-promo .ms-sdc__copy p{ font-size:15.5px !important; margin:14px 0 22px !important; }
  .ms-sdc--hero.dark-promo .ms-sdc__inner {
	padding: 0;
}
}

/* =====================================================================
   `portrait-hero` FLAG — dark 2-col portrait hero (REUSABLE).
   ---------------------------------------------------------------------
   Portrait pages (Pascal Bartosch, KB §19). Copy LEFT (h4 eyebrow mint,
   white Recoleta h1, mint-italic Recoleta role h3, muted lead p, ★ trust
   ul) + portrait RIGHT (field_image). Archivo+Recoleta dark system.
   Pair with `on-dark`. OWNS its gradient + its own vertical padding (a
   hex field can't express the gradient): the editor sets the band's
   top/bottom padding fields to 0 and field_background_color = #07303C as
   the full-bleed base behind the gutters. Breakpoint 820. Appended AFTER
   the base hero rules so the extra .portrait-hero class wins the ties.
   ===================================================================== */
.ms-sdc--hero.portrait-hero{
  font-family:'Archivo';
  background:
    radial-gradient(ellipse 80% 60% at 75% -10%, rgba(143,224,216,0.10), transparent 60%),
    linear-gradient(160deg, #07303C, #0B3C49 50%, #0A5E66);
  padding-left:20px !important; padding-right:20px !important;
}
/* flag owns the band's vertical padding (= AI section 72/54) — beats the
   root padding-25 kill (.ms-sdc.ms-sdc → 0); set padding fields to 0. */
.ms-sdc.ms-sdc.portrait-hero{ padding-top:72px !important; padding-bottom:72px !important; }
.ms-sdc--hero.portrait-hero .ms-sdc__copy{ font-family:'Archivo'; text-align:left; }
.ms-sdc--hero.portrait-hero .ms-sdc__inner{ max-width:1080px; }

/* eyebrow (h4) — mint, uppercase */
.ms-sdc--hero.portrait-hero .ms-sdc__copy h4, .ms-sdc--hero.portrait-hero .ms-sdc__copy 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 16px !important;
}
/* title (h1) — white Recoleta 46 */
.ms-sdc--hero.portrait-hero .ms-sdc__copy h1{
  font-family:var(--ms-display) !important; font-weight:700 !important; color:#fff !important;
  font-size:46px !important; line-height:1.18 !important; letter-spacing:-0.3px !important;
  text-align:left !important; margin:0 0 8px !important;
}
/* role line (h3) — mint italic Recoleta 21 */
.ms-sdc--hero.portrait-hero .ms-sdc__copy h3{
  font-family:var(--ms-display) !important; font-style:italic !important; font-weight:600 !important;
  color:#8FE0D8 !important; font-size:21px !important; line-height:1.3 !important;
  letter-spacing:0 !important; margin:0 0 6px !important;
}
.ms-sdc--hero.portrait-hero .ms-sdc__copy h3::after{ content:none !important; }
/* lead (p) — muted */
.ms-sdc--hero.portrait-hero .ms-sdc__copy p{
  font-family:'Archivo' !important; color:#D8ECEC !important;
  font-size:18px !important; line-height:1.6 !important; margin:18px 0 0 !important; max-width:540px;
}
/* trust row (ul) — inline ★ items, no bullets (★ via ::before) */
.ms-sdc.ms-sdc--hero.portrait-hero .ms-sdc__copy ul{
  list-style:none; padding:0; margin:28px 0 0;
  display:flex; gap:22px; flex-wrap:wrap; align-items:center;
}
.ms-sdc.ms-sdc--hero.portrait-hero .ms-sdc__copy ul > li{
  position:relative; margin:0; padding-left:20px;
  color:#C5DEDE; font-size:13px; line-height:1.4;
}
.ms-sdc--hero.portrait-hero .ms-sdc__copy ul > li::before{
  content:"\2605"; position:absolute; left:0; top:0; color:#8FE0D8; font-size:13px; line-height:1.4;
}
.ms-sdc--hero.portrait-hero .ms-sdc__copy ul > li strong{ color:#fff; font-weight:700; }

/* portrait (field_image) — rounded 18, mint border, shadow, natural aspect */
.ms-sdc--hero.portrait-hero .ms-sdc__media{
  margin:26px 0 0; border-radius:18px; overflow:hidden;
  border:1px solid rgba(143,224,216,0.25); box-shadow:0 24px 70px rgba(0,0,0,0.35);
}
.ms-sdc--hero.portrait-hero .ms-sdc__media img{
  width:100% !important; height:auto !important; object-fit:initial !important; display:block; border-radius:0;min-height: auto;
}

/* 2-col ≥821 */
@media (min-width:821px){
  .ms-sdc--hero.portrait-hero .ms-sdc__inner{
    display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center;
  }
  .ms-sdc--hero.portrait-hero .ms-sdc__copy{ align-self:center; }
  .ms-sdc--hero.portrait-hero .ms-sdc__media{ margin:0; }
}
/* stack ≤820 */
@media (max-width:820px){
  .ms-sdc.ms-sdc.portrait-hero{ padding-top:54px !important; padding-bottom:54px !important; }
  .ms-sdc--hero.portrait-hero .ms-sdc__copy h1{ font-size:34px !important; }
}

/* =====================================================================
   `founder` FLAG — LIGHT 2-col "person beside text" restyle of the hero.
   ---------------------------------------------------------------------
   Image on the LEFT (field_image, order:-1), copy on the right (h4 teal
   eyebrow, petrol Recoleta h3 name, teal h5 role line, Archivo body p).
   Light band — background comes from field_background_color the normal
   way (S2 #ffffff, S6 #EAF3F3), vertical padding from the padding fields.
   Reused by S2 (Werdegang) + S6 (Kontakt, with `contact-cards`).
   Breakpoint 820 (stacks, image on top ≤820, max-width 340).
   ===================================================================== */
.ms-sdc--hero.founder,
.ms-sdc--hero.founder .ms-sdc__copy{ font-family:'Archivo'; }
.ms-sdc--hero.founder{ padding-left:20px !important; padding-right:20px !important; }
.ms-sdc--hero.founder .ms-sdc__copy{ text-align:left; }
.ms-sdc--hero.founder .ms-sdc__inner{ display:flex; flex-direction:column; gap:24px; max-width:1080px; }
.ms-sdc--hero.founder .ms-sdc__media{ order:-1; margin:0; border-radius:0; overflow:visible;
  border:0; box-shadow:none; }
.ms-sdc--hero.founder .ms-sdc__media img{
  width:100% !important; max-width:340px; height:auto !important; object-fit:initial !important;min-height: auto;
  border-radius:18px; display:block;
}
/* eyebrow (h4) — teal */
.ms-sdc--hero.founder .ms-sdc__copy h4, .ms-sdc--hero.founder .ms-sdc__copy 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 12px !important;
}
/* name (h3) — petrol Recoleta 26, non-italic */
.ms-sdc--hero.founder .ms-sdc__copy h3{
  font-family:var(--ms-display) !important; font-style:normal !important; font-weight:700 !important;
  color:#0B3C49 !important; font-size:26px !important; line-height:1.18 !important;
  letter-spacing:-0.3px !important; margin:0 0 6px !important;
}
.lp-home .ms-sdc--hero.founder .ms-sdc__copy h3 {
	color: var(--ms-petrol) !important;
	font-size: 23px !important;
}
.ms-sdc--hero.founder .ms-sdc__copy h3::after{ content:none !important; }
/* role line (h5) — teal 600 14 */
.ms-sdc--hero.founder .ms-sdc__copy h5{
  font-family:'Archivo'; color:#007474; font-weight:600; font-size:14px;
  line-height:1.4; margin:0 0 16px; padding:0; border:0;
}
/* body (p) — ink 18 */
.ms-sdc--hero.founder .ms-sdc__copy p{
  font-family:'Archivo'; color:#243238; font-size:18px; line-height:1.6; margin:0 0 14px;
}
.ms-sdc--hero.founder .ms-sdc__copy p:last-child{ margin-bottom:0; }

@media (min-width:821px){
  .ms-sdc--hero.founder .ms-sdc__inner{ flex-direction:row; gap:40px; align-items:center; }
  .ms-sdc--hero.founder .ms-sdc__media{ flex:0 0 380px; }
  .ms-sdc--hero.founder .ms-sdc__media img{ max-width:none; }
  .ms-sdc--hero.founder .ms-sdc__copy{ flex:1; }
}
@media (max-width:820px){
  .ms-sdc--hero.founder.founder-img-bottom .ms-sdc__media{ order:0; }
}

/* ====================================================================
   gk-offer — the Danke-Seite offer card (photo left + copy right + gold
   CTA) on the `hero` SDC.  Sibling of the gk-* flags in normal.css.
   Source: Ratgeber-Gedankenkarussell-Dankeseite-v1.html (.offer)
   Spec:   docs/Ratgeber_Gedankenkarussell_Danke_Mapping.md
   This is the ONLY band that needs the hero's `link` slot — the
   dispatcher passes field_simple_link to the hero component only when
   this flag is present, so every other hero page is untouched.
   ==================================================================== */

/* house fonts, same mapping as the normal.css gk-* flags — see the note there */
.ms-sdc--hero.gk-offer{
  --ms-display: var(--gk-display, 'Recoleta');
  --ms-sans: var(--gk-sans, 'Archivo');
  font-family: var(--ms-sans);
  /* the AI's `.wrap` gutter; the hero base grows its gutter at wide viewports */
  padding-left: 24px; padding-right: 24px;
}

/* the card (AI: .offer) */
.ms-sdc--hero.gk-offer .ms-sdc__inner{
  max-width: 760px; margin: 0 auto;
  background: #F1F6F5; border: 1px solid #DCE7E5; border-radius: 16px;
  padding: 28px;
  display: grid; grid-template-columns: 190px 1fr; gap: 26px; align-items: center;
}
/* The hero renders copy-then-media; the AI puts the photo left. Same trick as
   `founder`. */
.ms-sdc--hero.gk-offer .ms-sdc__media{
  order: -1; margin: 0; position: relative;
}
.ms-sdc--hero.gk-offer .ms-sdc__media img{
  width: 100%; max-width: none; height: auto; display: block;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: center 18%;
  border-radius: 12px;
  /* The hero base sets `min-height:480px` at >=1040 (its full-bleed banner
     look). Overriding `height` does not touch it — it is a different property,
     so the 190px-wide photo rendered 480px tall instead of the AI's 237.5.
     `founder` and `portrait-hero` each carry the same reset. */
  min-height: auto;
}
/* The copy column is a flex column so the fine print can be pushed past the
   CTA below — the SDC always renders .ms-sdc__actions after the body. */
.ms-sdc--hero.gk-offer .ms-sdc__copy{
  display: flex; flex-direction: column; align-items: flex-start;
  text-align: left;
}
.ms-sdc--hero.gk-offer h3{
  font-family: var(--ms-display) !important; font-weight: 700 !important;
  font-size: 19.52px !important;
  /* 1.6, not 1.35: the AI declares NO line-height on `.offer h3` here, so it
     inherits the body's 1.6 (= 31.232px). Its 1.35 is in the <=900 block only.
     The base `.ms-sdc h3` would otherwise impose 1.3. */
  line-height: 1.6 !important;
  letter-spacing: 1px !important; color: #0F3D45 !important;
  margin: 0 0 9px !important;font-style: normal !important;
}
/* The byline (AI: p.who) — <strong> = the name, trailing text = the role.
   SOURCE BUG, reproduced deliberately: the AI declares
   `.who{font-size:.8rem;color:var(--muted);margin:0 0 16px}` (0,1,0) but its
   own `.offer p{font-size:.94rem;color:#44585E;margin:0 0 18px}` (0,1,1) wins
   on all three. So .who RENDERS at 15.04px/#44585E/mb18 — it is styled
   identically to a body paragraph, and only `.who b` (the name) is distinct.
   Matched to the render, not to the declaration, per the visual-fidelity rule.
   Measured in headless Chrome against the source. */
.ms-sdc--hero.gk-offer h5{
  font-family: var(--ms-sans) !important; font-weight: 400 !important;
  font-size: 15.04px !important; line-height: 1.6 !important;
  letter-spacing: normal !important; text-transform: none !important;
  color: #44585E !important; margin: 0 0 18px !important;
  /* The hero base gives its byline `padding-bottom:26px; border-bottom:1px`
     and RESETS them only at >=720. Our selector ties it on specificity (both
     (0,2,1)) and wins on source order — but only for properties we declare, so
     below 720 that 26+1px silently made this h5 27px taller. Zero them here;
     the <=900 block re-adds the AI's own top hairline. */
  padding: 0; border: 0;
}
.ms-sdc--hero.gk-offer h5 strong{
  display: block; font-family: var(--ms-display); font-weight: 700;
  font-size: 14.08px; color: #0F3D45;
}
.ms-sdc.ms-sdc.gk-offer .ms-sdc__copy p{
  font-family: var(--ms-sans); color: #44585E;
  font-size: 15.04px; line-height: 1.6; margin: 0 0 18px;
}
/* the fine print (AI: .offer small) — the LAST <p>. `:not(:first-of-type)`
   keeps a single-paragraph band from picking up this styling, and `order:1`
   is what moves it below the CTA. */
.ms-sdc.ms-sdc.gk-offer .ms-sdc__copy p:last-of-type:not(:first-of-type){
  font-size: 12.16px; color: #5C7278; margin: 11px 0 0; order: 1;
}
/* the gold CTA (AI: .btn) — same button as the LP's gk-forwho, padding 15/30 */
.ms-sdc--hero.gk-offer .ms-sdc__actions{ display: flex; margin: 0; }
.ms-sdc--hero.gk-offer .ms-sdc__link{ margin: 0; }
.ms-sdc.gk-offer .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 30px !important; margin: 0 !important; box-shadow: none;
  transition: filter .15s;
}
.ms-sdc.gk-offer a.cta-gold{
  background: #F0B93F !important; color: #0A2E35 !important;
}
.ms-sdc.gk-offer a.cta-gold:hover{
  filter: brightness(1.06); color: #0A2E35 !important; background: #F0B93F !important;
}

/* ---------- gk-offer — mobile (the page's only breakpoint) ----------
   The AI re-flows the card into a 58px avatar + headline row, then puts
   everything else full width. It does that with `display:contents` on
   .offer-body; the same trick flattens our copy column into the grid. */
@media (max-width: 900px){
  .ms-sdc--hero.gk-offer .ms-sdc__inner{
    grid-template-columns: 58px 1fr; gap: 0 13px; padding: 20px;
  }
  .ms-sdc--hero.gk-offer .ms-sdc__media{ grid-column: 1; grid-row: 1; }
  .ms-sdc--hero.gk-offer .ms-sdc__media img{
    aspect-ratio: 1 / 1; border-radius: 50%; object-position: center 15%;
  }
  .ms-sdc--hero.gk-offer .ms-sdc__copy{ display: contents; }
  .ms-sdc--hero.gk-offer h3{
    grid-column: 2; grid-row: 1; align-self: center;
    /* 1.35 IS declared by the AI in its <=900 block (unlike desktop, where the
       h3 inherits 1.6) — so it has to be restated against our desktop rule. */
    font-size: 16.32px !important; line-height: 1.35 !important; margin: 0 !important;
  }
  /* Same source-bug reproduction as on desktop: the AI's <=900 block declares
     `.who{margin:12px 0 0}` but `.offer p{font-size:.9rem;margin:10px 0 16px}`
     (0,1,1) still outranks `.who` (0,1,0), so what RENDERS is 14.4px and
     10/16 margins. The border-top + padding-top DO land — `.offer p` does not
     declare them. Measured against the source. */
  .ms-sdc--hero.gk-offer h5{
    grid-column: 1 / -1; grid-row: 2;
    font-size: 14.4px !important; margin: 10px 0 16px !important;
    padding-top: 12px; border-top: 1px solid #DCE7E5;
  }
  .ms-sdc.ms-sdc.gk-offer .ms-sdc__copy p{
    grid-column: 1 / -1; font-size: 14.4px; margin: 10px 0 16px;
  }
  .ms-sdc.ms-sdc.gk-offer .ms-sdc__copy p:last-of-type:not(:first-of-type){
    font-size: 12.16px; margin: 11px 0 0;
  }
  /* The AI's .btn goes full-width here (`grid-column:1/-1; display:block`).
     `display:block` on the anchor alone is not enough: .ms-sdc__actions is a
     flex container, so .ms-sdc__link is a flex item and shrinks to its content
     (the button came out 275px instead of 414px). Drop the flex at this
     breakpoint so every wrapper is a full-width block. */
  .ms-sdc--hero.gk-offer .ms-sdc__actions{ grid-column: 1 / -1; display: block; }
  .ms-sdc--hero.gk-offer .ms-sdc__link{ display: block; }
  .ms-sdc.gk-offer .ms-sdc__link a.simple-link{
    display: block; padding: 15px !important;
  }
}

/* =====================================================================
   HOMEPAGE FLAGS (basic_page_container, body.lp-home). Source:
   homepage.html. Mapping: docs/Homepage_Mapping.md. Light Archivo+Recoleta
   design; the AI CSS is authored in px (no rem), so values copy directly.
   All scoped under .ms-sdc--hero.<flag>. Appended after the base + earlier
   flags so equal-specificity ties win on source order.
   ===================================================================== */

/* ---------------------------------------------------------------------
   `home-hero` — Section 1. Full-width copy (kicker h4, teal h1, lead p),
   then a 2-col row [ pasted Vimeo <iframe> | ✓checks <ul> + CTA ], then a
   full-width trust-strip image (field_image). CTA = gated field_simple_link
   (cta-orange). Breakpoint 880 (2-col → stack). h1 is TEAL here (AI
   `h1{color:var(--teal)}`), overriding the base hero white h1.
   --------------------------------------------------------------------- */
.ms-sdc--hero.home-hero,
.ms-sdc--hero.home-hero .ms-sdc__copy{ font-family:'Archivo'; }
.ms-sdc--hero.home-hero{
  padding-left:20px !important; padding-right:20px !important;
  background:
    radial-gradient(ellipse 700px 420px at 88% -10%, rgba(23,112,105,.07), transparent 65%),
    radial-gradient(ellipse 500px 320px at -5% 100%, rgba(247,209,84,.10), transparent 60%);
}
.ms-sdc--hero.home-hero .ms-sdc__inner{ display:block; max-width:1060px; }
.ms-sdc--hero.home-hero .ms-sdc__copy{
  text-align:left; position:relative;
  display:grid; grid-template-columns:1.06fr .94fr; column-gap:52px; align-items:start;
}
/* Floating patent/guarantee seal sticker (inline <img> in the body) — absolute,
   so it is out of the grid flow (AI .seal-sticker). CKEditor may wrap a lone
   <img> in its own <p>; position whichever wrapper holds only the image. */
.ms-sdc--hero.home-hero .ms-sdc__copy > img,
.ms-sdc--hero.home-hero .ms-sdc__copy > p:has(> img:only-child){
  position:absolute; top:-6px; right:0; width:140px; height:auto; margin:0; z-index:6;
  transform:rotate(8deg); filter:drop-shadow(0 9px 15px rgba(0,0,0,.20));
}
.ms-sdc--hero.home-hero .ms-sdc__copy > p:has(> img:only-child) > img{
  width:100%; height:auto; display:block; margin:0; transform:none; filter:none;
}
@media (max-width:880px){
  .ms-sdc--hero.home-hero .ms-sdc__copy > img,
  .ms-sdc--hero.home-hero .ms-sdc__copy > p:has(> img:only-child){ width:104px; top:-4px; right:-4px; }
  .lp-home .ms-sdc--hero.home-hero .ms-sdc__copy > img, .lp-home .ms-sdc--hero.home-hero .ms-sdc__copy > p:has(> img:only-child) {
		right: -12px;
	}
	.lp-home  .ms-sdc--hero.home-hero .ms-sdc__copy h4 {
		line-height: 1.8 !important;
	}
	.lp-home .ms-sdc--hero.home-hero .ms-sdc__copy h1 {
		margin-top: -25px !important;
		margin-bottom: -25px !important;
	}
	.lp-home p .ms-sdc__actions {
		margin: -45px 0 25px 0px !important;
		padding: 0 !important;
	}
	.ms-sdc--hero.case-study .ms-sdc__copy .ms-sdc__media {
		margin-bottom: 25px;
	}
}
/* full-width copy items */
.ms-sdc--hero.home-hero .ms-sdc__copy > h4,
.ms-sdc--hero.home-hero .ms-sdc__copy > h1,
.ms-sdc--hero.home-hero .ms-sdc__copy > p{ grid-column:1 / -1; }
/* video (left) + checks (right) share the next row. The Vimeo <iframe> may be a
   bare child OR wrapped by CKEditor in a <p> — place either in column 1. */
.ms-sdc--hero.home-hero .ms-sdc__copy > iframe,
.ms-sdc--hero.home-hero .ms-sdc__copy > p:has(iframe){ grid-column:1; align-self:start; margin:0; }
.ms-sdc--hero.home-hero .ms-sdc__copy > ul{ grid-column:2; align-self:start; }
.ms-sdc--hero.home-hero .ms-sdc__actions{ grid-column:2; margin:30px 0 0; }
/* kicker (h4) — bold dark, NOT the uppercase eyebrow */
.ms-sdc--hero.home-hero .ms-sdc__copy h4{
  font-family:'Archivo' !important; text-transform:none !important; letter-spacing:normal !important;
  color:#262626 !important; font-size:16px !important; font-weight:700 !important; margin:0 0 16px !important;
}
/* h1 — Recoleta 700, TEAL */
.ms-sdc--hero.home-hero .ms-sdc__copy h1{
  font-family:var(--ms-display) !important; font-weight:700 !important; font-size:33px !important;
  line-height:1.12 !important; letter-spacing:-0.4px !important; color:var(--ms-petrol) !important;
  text-align:left !important; margin:0 0 18px !important; max-width:24ch;
}
/* lead + any full-width paragraph */
.ms-sdc--hero.home-hero .ms-sdc__copy > p{ font-size:18px; line-height:1.7; color:#3D3D3D; margin:18px 0 40px; }
/* pasted Vimeo iframe → 16:9 dark rounded frame (bare OR CKEditor-wrapped in <p>) */
.ms-sdc--hero.home-hero .ms-sdc__copy > iframe,
.ms-sdc--hero.home-hero .ms-sdc__copy > p:has(iframe) iframe{
  width:100%; aspect-ratio:16/9; height:auto; border:0; border-radius:18px; display:block;
  box-shadow:0 22px 54px rgba(18,52,48,.18); background:#D9EDE9;
}
/* ✓ checks list — teal circle + check (AI .checks) */
.ms-sdc.ms-sdc--hero.home-hero .ms-sdc__copy ul{ list-style:none; margin:0; padding:0; }
.ms-sdc--hero.home-hero .ms-sdc__copy ul > li{
  position:relative; padding:0 0 0 34px; margin:0 0 17px; border:0;
  font-size:18px; line-height:1.55; color:#3D3D3D; font-family:'Archivo';
}
.ms-sdc--hero.home-hero .ms-sdc__copy ul > li::before{
  content:""; position:absolute; left:0; top:2px; width:22px; height:22px; border-radius:50%; background:#E4F1EF;
}
.ms-sdc--hero.home-hero .ms-sdc__copy ul > li::after{
  content:""; position:absolute; left:6px; top:8px; width:10px; height:6px;
  border-left:2.5px solid var(--ms-petrol); border-bottom:2.5px solid var(--ms-petrol); transform:rotate(-45deg);
}
.ms-sdc--hero.home-hero .ms-sdc__copy ul > li strong{ color:#262626; }
/* CTA — orange, full-width (max 470) */
.ms-sdc--hero.home-hero .ms-sdc__actions a.cta-orange{ width:100%; max-width:470px; }
/* trust strip = one field_image, full-width below */
.ms-sdc--hero.home-hero .ms-sdc__media{ margin:52px 0 0; }
.ms-sdc--hero.home-hero .ms-sdc__media img{
  width:100%; height:auto !important; min-height:auto !important; object-fit:contain !important;
  max-width:960px; margin:0 auto;
}
.ms-sdc.ms-sdc--hero.home-hero {
	padding-top: 40px !important;
}
@media (max-width:880px){
  .ms-sdc--hero.home-hero .ms-sdc__copy{ grid-template-columns:1fr; row-gap:32px; }
  .ms-sdc--hero.home-hero .ms-sdc__copy > iframe,
  .ms-sdc--hero.home-hero .ms-sdc__copy > p:has(iframe),
  .ms-sdc--hero.home-hero .ms-sdc__copy > ul,
  .ms-sdc--hero.home-hero .ms-sdc__actions{ grid-column:1 / -1; }
  .ms-sdc--hero.home-hero .ms-sdc__copy > p{ margin-bottom:20px; }
  /* keep the 2-line kicker clear of the seal sticker (AI .kicker padding-right) */
  .ms-sdc--hero.home-hero .ms-sdc__copy h4{ padding-right:80px; }
}
@media (min-width:761px){
  .ms-sdc--hero.home-hero .ms-sdc__copy h1{ font-size:50px !important; }
}

/* ---------------------------------------------------------------------
   `case-study` (+ `right-image`) — Section 5 case rows. The WHOLE media
   column (photo + Vorher/Nachher bar card) is ONE uploaded field_image.
   Card = white rounded box; image left by default, `right-image` flips it.
   Copy: h3 name, h3+p role, p:nth-of-type Vorher/Nachher (leading <strong>
   = tag pill), blockquote quote. Breakpoint 760 (stacks: image on top).
   --------------------------------------------------------------------- */
.ms-sdc--hero.case-study,
.ms-sdc--hero.case-study .ms-sdc__copy{ font-family:'Archivo'; }
.ms-sdc--hero.case-study{ padding-left:20px !important; padding-right:20px !important; }
.ms-sdc--hero.case-study .ms-sdc__inner{
  max-width:1060px; display:flex; flex-direction:column; gap:20px;
  background:#fff; border:1px solid #E9E9E6; border-radius:20px; padding:18px;
  box-shadow:0 3px 14px rgba(18,52,48,.05);
}
/* Gap between the 5 case cards = AI .caselist gap 26px. Use PADDING on the
   (transparent) .ms-sdc, not margin: a bottom margin collapses OUT of the band's
   own paragraph and shows the page white; padding stays inside, so the band's
   grey field_background_color fills the gap. !important beats the padding-25 reset. */
.ms-sdc.ms-sdc--hero.case-study{ padding-bottom:20px !important; }
.ms-sdc--hero.case-study .ms-sdc__media{ order:-1; margin:0; border:0; box-shadow:none; }
.ms-sdc--hero.case-study .ms-sdc__media img{
  width:100% !important; height:auto !important; min-height:auto !important; object-fit:initial !important;
  border-radius:14px; display:block;
}
.ms-sdc--hero.case-study .ms-sdc__copy{ text-align:left; }
.ms-sdc--hero.case-study .ms-sdc__copy h3{
  font-family:var(--ms-display) !important; font-style:normal !important; font-weight:700 !important;
  font-size:25px !important; line-height:1.2 !important; color:var(--ms-petrol) !important; margin:0 0 2px !important;
}
.ms-sdc--hero.case-study .ms-sdc__copy h3::after{ content:none !important; }
.ms-sdc--hero.case-study .ms-sdc__copy h3 + p{ color:#77837f; font-weight:600; font-size:14px; margin:0 0 16px; }
.ms-sdc--hero.case-study .ms-sdc__copy p{ font-size:18px; line-height:1.7; color:#3D3D3D; margin:0 0 16px; }
/* Vorher (2nd p) / Nachher (3rd p) tag pills on the leading <strong> */
.ms-sdc--hero.case-study .ms-sdc__copy p:nth-of-type(2) > strong:first-child,
.ms-sdc--hero.case-study .ms-sdc__copy p:nth-of-type(3) > strong:first-child{
  display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
  border-radius:6px; padding:3px 10px; margin-right:8px; vertical-align:2px; color:#fff;
}
.ms-sdc--hero.case-study .ms-sdc__copy p:nth-of-type(2) > strong:first-child{ background:#FBF0EE; color:#A2564D; }
.ms-sdc--hero.case-study .ms-sdc__copy p:nth-of-type(3) > strong:first-child{ background:#E4F1EF; color:#007375; }
.ms-sdc--hero.case-study .ms-sdc__copy blockquote{
  border-left:3px solid #F7D154; padding:4px 0 4px 20px; margin:20px 0 0; background:none;
  font-size:18px; line-height:1.6; color:#262626; font-style:italic;
}
@media (min-width:761px){
  .ms-sdc--hero.case-study .ms-sdc__inner{ flex-direction:row; gap:36px; padding:32px; align-items:flex-start; }
  .ms-sdc--hero.case-study .ms-sdc__media{ flex:0 0 270px; }
  .ms-sdc--hero.case-study .ms-sdc__copy{ flex:1; }
  .ms-sdc--hero.case-study.right-image .ms-sdc__media{ order:1; }   /* image on the right */
}

/* ---------------------------------------------------------------------
   `problem-split` — Section 3 recognition grid. Image LEFT (erschöpfte
   Person), copy RIGHT (recog-intro <p><strong>, dot-bullet <ul>). Header
   (h2 + intro) is a preceding `normal` paragraph; the yellow pullquote +
   CTA are a trailing `normal.pullquote-yellow`. Breakpoint 820.
   --------------------------------------------------------------------- */
.ms-sdc--hero.problem-split,
.ms-sdc--hero.problem-split .ms-sdc__copy{ font-family:'Archivo'; }
.ms-sdc--hero.problem-split{ padding-left:20px !important; padding-right:20px !important; }
.ms-sdc--hero.problem-split .ms-sdc__inner{ display:flex; flex-direction:column; gap:26px; max-width:1060px; }
.ms-sdc--hero.problem-split .ms-sdc__media{
  order:-1; margin:0; border:1px solid #E9E9E6; border-radius:18px; overflow:hidden;
  box-shadow:0 8px 30px rgba(18,52,48,.07);
}
.ms-sdc--hero.problem-split .ms-sdc__media img{
  width:100% !important; height:auto !important; min-height:auto !important; object-fit:cover !important;
  aspect-ratio:1 / 1.05; border-radius:18px; display:block;
}
.ms-sdc--hero.problem-split .ms-sdc__copy{ text-align:left; }
.ms-sdc--hero.problem-split .ms-sdc__copy p{ font-size:18px; line-height:1.55; color:#3D3D3D; margin:0 0 13px; }
.ms-sdc--hero.problem-split .ms-sdc__copy > p:first-child{ font-weight:700; color:#262626; margin-bottom:18px; }
.ms-sdc.ms-sdc--hero.problem-split .ms-sdc__copy ul{ list-style:none; margin:0; padding:0; }
.ms-sdc--hero.problem-split .ms-sdc__copy ul > li{
  position:relative; padding:0 0 0 26px; margin:0 0 13px; border:0; font-size:18px; line-height:1.55; color:#3D3D3D;
}
.ms-sdc--hero.problem-split .ms-sdc__copy ul > li::before{
  content:""; position:absolute; left:2px; top:10px; width:8px; height:8px; border-radius:50%;
  background:#A2564D; opacity:.75;
}
.ms-sdc--hero.problem-split .ms-sdc__copy ul > li strong{ color:#262626; }
.problem-split .ms-sdc__inner {
	padding-top: 50px;
	padding-bottom: 40px;
}


@media (min-width:821px){
  .ms-sdc--hero.problem-split .ms-sdc__inner{ flex-direction:row; gap:52px; align-items:center; }
  .ms-sdc--hero.problem-split .ms-sdc__media{ flex:0 0 42%; }
  .ms-sdc--hero.problem-split .ms-sdc__copy{ flex:1; }
}

/* ---------------------------------------------------------------------
   `sci-hero` — Section 7 study panel. Gradient card: [ big Recoleta
   number (h3) + h4 stat + p explainer | fMRT image ]. The band header
   (h2 + intro) is a preceding `normal`; the 2 stat cards + note are a
   trailing `normal.stat-panels`. Breakpoint 820.
   --------------------------------------------------------------------- */
.ms-sdc--hero.sci-hero,
.ms-sdc--hero.sci-hero .ms-sdc__copy{ font-family:'Archivo'; }
.ms-sdc--hero.sci-hero{ padding-left:20px !important; padding-right:20px !important; }
.ms-sdc--hero.sci-hero .ms-sdc__inner{
  max-width:1060px; display:flex; flex-direction:column; gap:38px;
  background:linear-gradient(180deg,#F7FBFA,#EAF4F2); border:1px solid #CDE3DF; border-radius:20px; padding:40px;
  box-shadow:0 18px 44px rgba(0,115,117,.14);
}
.ms-sdc--hero.sci-hero .ms-sdc__copy{ text-align:left; }
.ms-sdc--hero.sci-hero .ms-sdc__copy h3{
  font-family:var(--ms-display) !important; font-style:normal !important; font-weight:700 !important;
  font-size:42px !important; line-height:1 !important; color:var(--ms-petrol) !important; margin:0 0 8px !important;
}
.ms-sdc--hero.sci-hero .ms-sdc__copy h3::after{ content:none !important; }
.ms-sdc--hero.sci-hero .ms-sdc__copy h4{
  font-family:var(--ms-display) !important; text-transform:none !important; letter-spacing:normal !important;
  color:var(--ms-petrol) !important; font-weight:700 !important; font-size:18px !important; margin:8px 0 10px !important;
}
.ms-sdc--hero.sci-hero .ms-sdc__copy p{ font-size:16px; line-height:1.6; color:#3D3D3D; margin:0; }
.ms-sdc--hero.sci-hero .ms-sdc__media{ order:0; margin:0; border-radius:14px; overflow:hidden; }
.ms-sdc--hero.sci-hero .ms-sdc__media img{
  width:100%; height:auto !important; min-height:auto !important; aspect-ratio:4 / 3; object-fit:cover !important;
  border-radius:14px; display:block;
}
@media (min-width:821px){
  .ms-sdc--hero.sci-hero .ms-sdc__inner{ flex-direction:row; gap:38px; align-items:center; }
  .ms-sdc--hero.sci-hero .ms-sdc__copy{ flex:1.05; }
  .ms-sdc--hero.sci-hero .ms-sdc__media{ flex:.95; }
}

/* ---------------------------------------------------------------------
   `nextstep` — Section 9 dark teal band (pair with `on-dark`; field bg
   #007375). Copy left (white h2 + lead + CTA), Pascal photo right.
   CTA = gated field_simple_link (cta-orange). Breakpoint 820 (photo top).
   --------------------------------------------------------------------- */
.ms-sdc--hero.nextstep,
.ms-sdc--hero.nextstep .ms-sdc__copy{ font-family:'Archivo'; }
.ms-sdc--hero.nextstep{ padding-left:20px !important; padding-right:20px !important; }
.ms-sdc--hero.nextstep .ms-sdc__inner{
  max-width:1060px; display:flex; flex-direction:column; gap:30px; align-items:center;
}
.ms-sdc--hero.nextstep .ms-sdc__copy{ text-align:left; }
.ms-sdc--hero.nextstep .ms-sdc__copy h2{ color:#fff !important; }
.ms-sdc--hero.nextstep .ms-sdc__copy h2::after{ content:none !important; }
.ms-sdc--hero.nextstep .ms-sdc__copy p{ color:#fff; font-size:19px; line-height:1.7; margin:6px 0 30px; }
.ms-sdc--hero.nextstep .ms-sdc__copy p strong{ color:#fff; }
.ms-sdc--hero.nextstep .ms-sdc__media{ order:0; margin:0; border-radius:20px; overflow:hidden;
  box-shadow:0 22px 54px rgba(18,52,48,.18); }
.ms-sdc--hero.nextstep .ms-sdc__media img{
  width:100%; height:auto !important; min-height:auto !important; object-fit:cover !important; border-radius:20px; display:block;
}
.ms-sdc--hero.nextstep .ms-sdc__actions{ margin:0; }
@media (min-width:821px){
  .ms-sdc--hero.nextstep .ms-sdc__inner{ flex-direction:row; gap:56px; }
  .ms-sdc--hero.nextstep .ms-sdc__copy{ flex:1.05; }
  .ms-sdc--hero.nextstep .ms-sdc__media{ flex:.95; }
}
@media (max-width:820px){
  .ms-sdc--hero.nextstep .ms-sdc__media{ order:-1; max-width:460px; }
}

/* ---------------------------------------------------------------------
   `founder-textleft` — Michaela block (Section 8). MODIFIER on `founder`
   (use css_tag `founder founder-textleft`): keeps all `founder` typography
   but flips the image to the RIGHT at >=821 (text left). Pascal uses plain
   `founder` (image left).
   --------------------------------------------------------------------- */
@media (min-width:821px){
  .ms-sdc--hero.founder.founder-textleft .ms-sdc__media{ order:1; }
}

/* =====================================================================
   ENTDECKEN ("Entdecken & Ressourcen") — resource-hub flags.
   Palette from the AI page: petrol #115759, petrol-l #177375, mint #8FE0D8,
   teal #007375, teal-mid #00A295, teal-soft #E4F1EF, orange #F3954A.
   Fonts Archivo + Recoleta. Breakpoints 900 / 760 / 600. All scoped under
   .ms-sdc--hero.<flag>; appended after the base hero so they win ties.
   ===================================================================== */

/* Shared orange primary CTA. The button is now a tracked Simple Link
   (field_simple_link → simple_link paragraph, field_button_type=normal so no
   Bootstrap `.btn` classes leak in), rendered by the hero SDC inside
   .ms-sdc__copy > .ms-sdc__actions > .ms-sdc__link. `.ms-sdc__copy a` still
   matches it and reproduces the AI `.btn` byte-for-byte (17/34, radius 12). */
.ms-sdc--hero.offer-card .ms-sdc__copy a,
.ms-sdc--hero.cta-card   .ms-sdc__copy a {
  display: inline-flex; align-items: center; gap: 10px;
  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; white-space: normal; margin: 0 !important;
  transition: background .18s, transform .12s, box-shadow .2s;
}
.ms-sdc--hero.offer-card .ms-sdc__copy a:hover,
.ms-sdc--hero.cta-card   .ms-sdc__copy a:hover {
  background: #E67F32 !important; color: #fff !important;
  transform: translateY(-2px); box-shadow: 0 12px 30px rgba(243,149,74,.5) !important;
}
/* Spacing above the button (was carried by the CTA <p>; now the actions block). */
.ms-sdc--hero.offer-card .ms-sdc__actions,
.ms-sdc--hero.cta-card   .ms-sdc__actions { margin: 26px 0 0; }
/* Band 2 (stress-gauge): the AI order is intro → button → trust line. The
   Simple Link renders after the body, so flex-reorder the copy to lift the
   button above the trailing trust <p> (the last p with no link). */
.ms-sdc--hero.offer-card.stress-gauge .ms-sdc__copy { display: flex; flex-direction: column; align-items: stretch; }
.ms-sdc--hero.offer-card.stress-gauge .ms-sdc__actions { order: 1; margin: 0; }
.ms-sdc--hero.offer-card.stress-gauge .ms-sdc__copy > p:last-of-type:not(:has(a)):not(:first-of-type) { order: 2; }
@media (max-width: 600px) {
  .ms-sdc--hero.offer-card .ms-sdc__copy a,
  .ms-sdc--hero.cta-card   .ms-sdc__copy a { width: 100%; justify-content: center; }
}

/* ---------------------------------------------------------------------
   hub-hero (Band 1) — petrol hero, mint Recoleta signature, rounded 22px
   square portrait. Pair with `on-dark` + field_background_color #115759.
   Body: <h1> title · first <p> lead · <h5> signature · trailing <p> role.
   --------------------------------------------------------------------- */
.ms-sdc--hero.hub-hero { font-family: 'Archivo'; }
.ms-sdc--hero.hub-hero .ms-sdc__inner { max-width: 1120px; margin: 0 auto; display: block; }
.ms-sdc--hero.hub-hero .ms-sdc__copy { text-align: left; align-self: center; }
.ms-sdc--hero.hub-hero .ms-sdc__copy h1 {
  font-family: 'Recoleta' !important; font-weight: 600 !important;
  font-size: clamp(32px,5vw,52px) !important; line-height: 1.14 !important;
  letter-spacing: -0.01em !important; color: #fff !important; text-align: left !important;
  margin: 0 0 20px !important;
}
.ms-sdc--hero.hub-hero .ms-sdc__copy p {
  color: #fff; font-size: 20px; line-height: 1.6; margin: 0 0 20px; max-width: 520px;
}
.ms-sdc--hero.hub-hero .ms-sdc__copy h5 {
  font-family: 'Recoleta' !important; font-weight: 600 !important;
  color: #8FE0D8 !important; font-size: 22px !important; line-height: 1.2 !important;
  margin: 6px 0 0 !important; padding: 0 !important; border: 0 !important;
}
.ms-sdc--hero.hub-hero .ms-sdc__copy h5 + p {
  color: #C4DCDC; font-size: 14px; line-height: 1.5; margin: 3px 0 0; max-width: none;
}
.ms-sdc--hero.hub-hero .ms-sdc__media { margin: 26px 0 0; max-width: 300px; }
.ms-sdc--hero.hub-hero .ms-sdc__media picture { display: block; }
.ms-sdc--hero.hub-hero .ms-sdc__media img {
  width: 100%; height: auto !important; min-height: auto !important;
  aspect-ratio: 1 / 1; object-fit: cover; display: block;
  border-radius: 22px; border: 1px solid rgba(143,224,216,.2); background: #0A5E66;
}
@media (min-width: 901px) {
  .ms-sdc--hero.hub-hero .ms-sdc__inner {
    display: grid; grid-template-columns: 1.25fr .75fr; gap: 56px;
    align-items: center; max-width: 1120px;
  }
  .ms-sdc--hero.hub-hero .ms-sdc__media { margin: 0 0 0 auto; }
}
@media (max-width: 900px) {
  .ms-sdc--hero.hub-hero .ms-sdc__media { max-width: 340px; margin: 36px auto 0; }
}
@media (max-width: 600px) {
  .ms-sdc--hero.hub-hero .ms-sdc__copy h1 { font-size: 30px !important; }
}

/* ---------------------------------------------------------------------
   offer-card (Bands 2 + 6) — centred teal-soft card on a paper band.
   2-col: copy left + visual right. Band 2 visual = an uploaded image in
   field_image (the stress gauge). Band 6 = the `report-doc` sub-flag
   (baked petrol doc medallion, no image). Body: <h4> eyebrow · <h2> ·
   <p> · CTA link · optional trust <p> ( <em>★★★★★</em> + <strong> ).
   --------------------------------------------------------------------- */
.ms-sdc--hero.offer-card { font-family: 'Archivo'; }
.ms-sdc--hero.offer-card .ms-sdc__inner {
  max-width: 1000px; margin: 0 auto;
  background: #E4F1EF; border: 1px solid #CDE3DF; border-radius: 24px;
  padding: clamp(32px,4vw,48px);
  display: grid; grid-template-columns: 1.35fr .65fr; gap: 40px; align-items: center;
}
/* Until the visual (field_image) is uploaded, a plain offer-card has no media
   column — collapse to a single column so the card isn't lop-sided. Reverts
   automatically once the image is present. (report-doc supplies its own col.) */
.ms-sdc--hero.offer-card:not(.report-doc) .ms-sdc__inner:not(:has(.ms-sdc__media)) {
  grid-template-columns: 1fr;
}
.ms-sdc--hero.offer-card .ms-sdc__copy { text-align: left; min-width: 0; }
.ms-sdc--hero.offer-card .ms-sdc__copy h4 {
  font-family: 'Archivo' !important; font-weight: 700 !important;
  font-size: 12.5px !important; letter-spacing: .14em !important; text-transform: uppercase !important;
  color: #00A295 !important; line-height: 1.4 !important; margin: 0 0 12px !important;
}
.ms-sdc--hero.offer-card .ms-sdc__copy h2 {
  font-family: 'Recoleta' !important; font-weight: 600 !important;
  font-size: clamp(26px,3.2vw,34px) !important; line-height: 1.14 !important;
  letter-spacing: -0.01em !important; color: #141414 !important; margin: 0 0 12px !important;
}
.ms-sdc--hero.offer-card .ms-sdc__copy h2::after { content: none !important; }
.ms-sdc--hero.offer-card .ms-sdc__copy > p {
  color: #262626; font-size: 18px; line-height: 1.65; max-width: 440px; margin: 0 0 26px;
}
/* trust line (last p WITHOUT a link): smaller, muted, gold stars via <em>,
   ink <strong>. The :not(:has(a)) guard excludes the CTA paragraph, so a
   band with no trust line (e.g. the Report) is unaffected. */
.ms-sdc--hero.offer-card .ms-sdc__copy > p:last-of-type:not(:has(a)) {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 9px;
  margin: 20px 0 0; font-size: 14px; color: #262626; max-width: none;
}
.ms-sdc--hero.offer-card .ms-sdc__copy > p:last-of-type:not(:has(a)) em {
  color: #F2C14E; font-style: normal; letter-spacing: 1px; font-size: 14px;
}
.ms-sdc--hero.offer-card .ms-sdc__copy strong { color: #141414; }
/* visual (uploaded gauge image) — the card frame + shadow are baked into the
   image (transparent margins), so no border-radius/frame is added here. */
.ms-sdc--hero.offer-card .ms-sdc__media { margin: 0; min-width: 0; }
.ms-sdc--hero.offer-card .ms-sdc__media img {
  width: 100%; height: auto !important; min-height: auto !important;
  object-fit: contain; display: block;
}
/* stress-gauge sub-flag (Band 2): baked CSS gauge widget as grid column 2,
   replacing field_image. Reproduces the AI `.tc-visual` card 1:1. The
   offer-card grid (1.35fr .65fr, gap 40, max-width 1000) already matches the
   AI `.testcard`, so only the inner widget needs styling here. */
.ms-sdc--hero.offer-card.stress-gauge .ms-sdc__media { margin: 0; min-width: 0; }
.ms-sdc--hero.offer-card.stress-gauge .tc-visual {
  background: #fff; border: 1px solid #CDE3DF; border-radius: 18px;
  padding: 30px 28px; box-shadow: 0 8px 26px -14px rgba(18,52,48,.25);
}
.ms-sdc--hero.offer-card.stress-gauge .tc-vlabel {
  font-family: 'Archivo'; font-size: 12px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: #00A295;
  margin: 0 0 20px; text-align: center;
}
.ms-sdc--hero.offer-card.stress-gauge .tc-scale {
  height: 12px; border-radius: 999px;
  background: linear-gradient(90deg,#3EAE6E,#F2C14E 55%,#E07A5F);
  position: relative; margin: 0 8px 12px;
}
.ms-sdc--hero.offer-card.stress-gauge .tc-scale .marker {
  position: absolute; top: 50%; left: 30%; width: 24px; height: 24px;
  border-radius: 50%; background: #fff; border: 4px solid #007375;
  transform: translate(-50%,-50%); box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.ms-sdc--hero.offer-card.stress-gauge .tc-scalerow {
  display: flex; justify-content: space-between; padding: 0 4px;
  font-family: 'Archivo'; font-size: 11.5px; font-weight: 600; color: #262626;
}
.ms-sdc--hero.offer-card.stress-gauge .tc-cap {
  font-family: 'Recoleta'; font-weight: 600; font-size: 19px;
  color: #141414; text-align: center; margin-top: 18px;
}

/* report-doc sub-flag: baked petrol doc medallion as grid column 2 */
.ms-sdc--hero.offer-card.report-doc .ms-sdc__inner { grid-template-columns: 1fr auto; gap: 44px; }
.ms-sdc--hero.offer-card.report-doc .ms-sdc__inner::after {
  content: ""; width: 150px; height: 150px; border-radius: 20px;
  background: #115759 no-repeat center / 64px 64px;
  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%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%203v5h5%22%2F%3E%3Cpath%20d%3D%22M14%203H6a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8z%22%2F%3E%3Cpath%20d%3D%22M8%2013h8M8%2017h6%22%2F%3E%3C%2Fsvg%3E");
  align-self: center; justify-self: end;
}
@media (max-width: 900px) {
  .ms-sdc--hero.offer-card .ms-sdc__inner { grid-template-columns: 1fr; text-align: center; }
  .ms-sdc--hero.offer-card .ms-sdc__copy { text-align: center; }
  .ms-sdc--hero.offer-card .ms-sdc__copy > p { margin-left: auto; margin-right: auto; }
  .ms-sdc--hero.offer-card .ms-sdc__copy > p:last-of-type { justify-content: center; }
}
@media (max-width: 600px) {
  /* tighter card padding on phones (= AI .testcard 26/22) so the content column,
     gauge image and full-width CTA aren't squeezed narrower than the design */
  .ms-sdc--hero.offer-card .ms-sdc__inner { padding: 26px 22px; }
  /* gauge widget tightens to AI .tc-visual 24/20 on phones */
  .ms-sdc--hero.offer-card.stress-gauge .tc-visual { padding: 24px 20px; }
}
@media (max-width: 760px) {
  .ms-sdc--hero.offer-card.report-doc .ms-sdc__inner { grid-template-columns: 1fr; justify-items: center; }
  .ms-sdc--hero.offer-card.report-doc .ms-sdc__copy { order: 1; }
  .ms-sdc--hero.offer-card.report-doc .ms-sdc__inner::after { order: 0; justify-self: center; }
}

/* ---------------------------------------------------------------------
   cta-card (Band 8) — centred petrol card, copy + photo, orange CTA,
   gold <strong>. Pair with `on-dark`. Body: <h2> · <p> (with <strong>) ·
   CTA link. Photo = field_image (right; on top when stacked ≤760).
   --------------------------------------------------------------------- */
.ms-sdc--hero.cta-card { font-family: 'Archivo'; }
.ms-sdc--hero.cta-card .ms-sdc__inner {
  max-width: 1000px; margin: 0 auto;
  background: #115759; border-radius: 24px; padding: clamp(32px,4vw,52px);
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center;
  box-shadow: 0 8px 30px rgba(18,52,48,.10);
}
.ms-sdc--hero.cta-card .ms-sdc__copy { text-align: left; min-width: 0; }
.ms-sdc--hero.cta-card .ms-sdc__copy h2 {
  font-family: 'Recoleta' !important; font-weight: 600 !important;
  font-size: clamp(26px,4vw,38px) !important; line-height: 1.14 !important;
  letter-spacing: -0.01em !important; color: #fff !important; margin: 0 0 16px !important;
}
.ms-sdc--hero.cta-card .ms-sdc__copy h2::after { content: none !important; }
.ms-sdc--hero.cta-card .ms-sdc__copy p {
  color: #fff; font-size: 20px; line-height: 1.6; max-width: 460px; margin: 0 0 28px;
}
.ms-sdc--hero.cta-card .ms-sdc__copy strong { color: #F2C14E !important; font-weight: 700; }
.ms-sdc--hero.cta-card .ms-sdc__media { margin: 0; min-width: 0; border-radius: 18px; overflow: hidden;
  box-shadow: 0 14px 34px rgba(0,0,0,.28); }
.ms-sdc--hero.cta-card .ms-sdc__media img {
  width: 100%; height: auto !important; min-height: auto !important; object-fit: cover; display: block;
}
@media (max-width: 760px) {
  .ms-sdc--hero.cta-card .ms-sdc__inner { grid-template-columns: 1fr; gap: 24px; }
  .ms-sdc--hero.cta-card .ms-sdc__media { order: -1; }
}

/* ---------------------------------------------------------------------
   podcast-feature (Band 4a) — petrol card, square cover LEFT + copy RIGHT
   with mint YouTube pill + ghost Spotify/Apple pills. Pair with `on-dark`.
   Body: <h2> · <p> · a <ul> of platform links (icons baked from href).
   Cover = field_image (210px square). Stacks ≤760 (cover on top, centred).
   --------------------------------------------------------------------- */
.ms-sdc--hero.podcast-feature { font-family: 'Archivo'; }
/* centred section head ABOVE the card (field_main_title) — on the paper band,
   so it uses DARK text even though the band carries `on-dark`. */
.ms-sdc--hero.podcast-feature .ms-sdc__header {
  max-width: 720px; margin: 0 auto 44px; text-align: center; padding: 0 24px;
}
.ms-sdc--hero.podcast-feature .ms-sdc__header 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; margin: 0 0 12px !important;
}
.ms-sdc--hero.podcast-feature .ms-sdc__header h2::after { content: none !important; }
.ms-sdc--hero.podcast-feature .ms-sdc__header h2 em { color: #007375 !important; font-style: normal; }
.ms-sdc--hero.podcast-feature .ms-sdc__header p { color: #262626; font-size: 20px; line-height: 1.65; margin: 0; }
.ms-sdc--hero.podcast-feature .ms-sdc__header p strong { color: #141414; }
.ms-sdc--hero.podcast-feature .ms-sdc__inner {
  max-width: 1000px; margin: 0 auto;
  background: #115759; border-radius: 24px; padding: 40px 44px;
  display: grid; grid-template-columns: auto 1fr; gap: 38px; align-items: center;
  box-shadow: 0 8px 30px rgba(18,52,48,.10);
}
.ms-sdc--hero.podcast-feature .ms-sdc__media {
  order: -1; margin: 0; width: 210px; height: 210px; flex: none;
  border-radius: 18px; overflow: hidden; background: #177375;
}
.ms-sdc--hero.podcast-feature .ms-sdc__media img {
  width: 100%; height: 100% !important; min-height: auto !important; object-fit: cover; display: block;
}
.ms-sdc--hero.podcast-feature .ms-sdc__copy { text-align: left; min-width: 0; }
.ms-sdc--hero.podcast-feature .ms-sdc__copy h2 {
  font-family: 'Recoleta' !important; font-weight: 600 !important;
  font-size: clamp(24px,3vw,32px) !important; line-height: 1.14 !important;
  letter-spacing: -0.01em !important; color: #fff !important; margin: 0 0 12px !important;
}
.ms-sdc--hero.podcast-feature .ms-sdc__copy h2::after { content: none !important; }
.ms-sdc--hero.podcast-feature .ms-sdc__copy p {
  color: #EAF4F4; font-size: 18px; line-height: 1.65; max-width: 520px; margin: 0 0 6px;
}
/* platform pill row (a <ul> of links) */
.ms-sdc--hero.podcast-feature .ms-sdc__copy ul {
  list-style: none !important; padding: 0 !important; margin: 22px 0 0 !important;
  display: flex; gap: 14px; flex-wrap: wrap;
}
.ms-sdc--hero.podcast-feature .ms-sdc__copy ul > li { margin: 0 !important; padding: 0 !important; }
.ms-sdc--hero.podcast-feature .ms-sdc__copy ul > li::before { content: none !important; }
.ms-sdc--hero.podcast-feature .ms-sdc__copy ul a {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Archivo' !important; font-weight: 700 !important; font-size: 16px !important;
  padding: 14px 24px !important; border-radius: 12px !important; text-decoration: none !important;
  border: 1.5px solid rgba(143,224,216,.5); color: #fff !important; background: transparent;
  transition: transform .15s, background .2s;
}
.ms-sdc--hero.podcast-feature .ms-sdc__copy ul a::before {
  content: ""; width: 18px; height: 18px; flex: none;
  background: no-repeat center / contain;
}
.ms-sdc--hero.podcast-feature .ms-sdc__copy ul a:hover { transform: translateY(-2px); background: rgba(143,224,216,.12); color: #fff !important; }
/* YouTube = mint fill; Spotify/Apple = ghost. Icons keyed on href. */
.ms-sdc--hero.podcast-feature .ms-sdc__copy ul a[href*="youtube"] {
  background: #8FE0D8; color: #0C4143 !important; border-color: #8FE0D8;
}
.ms-sdc--hero.podcast-feature .ms-sdc__copy ul a[href*="youtube"]:hover { background: #8FE0D8; color: #0C4143 !important; }
.ms-sdc--hero.podcast-feature .ms-sdc__copy ul 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%230C4143%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");
}
.ms-sdc--hero.podcast-feature .ms-sdc__copy ul 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%23ffffff%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--hero.podcast-feature .ms-sdc__copy ul a[href*="apple"]::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%22M12%202a10%2010%200%200%200-1.9%2019.8c-.14-.5-.02-1.1.1-1.6l1-4.2a2.6%202.6%200%200%201-.22-1.06c0-.99.58-1.73%201.3-1.73.6%200%20.9.46.9%201%200%20.62-.4%201.54-.6%202.4-.17.72.36%201.3%201.07%201.3%201.28%200%202.27-1.35%202.27-3.3%200-1.73-1.24-2.94-3.02-2.94-2.06%200-3.27%201.54-3.27%203.14%200%20.62.24%201.28.54%201.65.06.07.07.13.05.2l-.2.83c-.03.13-.11.16-.25.1-.93-.43-1.51-1.78-1.51-2.87%200-2.33%201.7-4.48%204.9-4.48%202.57%200%204.57%201.83%204.57%204.28%200%202.56-1.61%204.62-3.85%204.62-.75%200-1.46-.39-1.7-.85l-.46%201.77c-.17.65-.62%201.46-.93%201.96A10%2010%200%201%200%2012%202z%22%2F%3E%3C%2Fsvg%3E");
}
@media (max-width: 760px) {
  .ms-sdc--hero.podcast-feature .ms-sdc__inner { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 24px; padding: 32px 24px; }
  .ms-sdc--hero.podcast-feature .ms-sdc__copy { text-align: center; }
  .ms-sdc--hero.podcast-feature .ms-sdc__copy ul { justify-content: center; }
  .ms-sdc--hero.podcast-feature .ms-sdc__copy p { max-width: none; }
}
@media (max-width: 600px) {
  .ms-sdc--hero.podcast-feature .ms-sdc__media { width: 170px; height: 170px; }
}

/* =====================================================================
   fMRT-STUDIE — hero-SDC flags (body.lp-fmrt).
   Source: Mind Switch - fMRT-Studie-v6.html · Mapping: fmrtv6/fmrtv6_Mapping.md.
   Breakpoints 900 / 760 / 640. Scoped .ms-sdc--hero.<flag>; appended after
   the base hero so they win ties. Palette per the fMRT block in normal.css.
   ===================================================================== */

/* ---------- study-intro (P3) — Michaela intro: photo LEFT + centred quote/sub/name.
   Reuses the hero copy+image; media flipped to the left. */
.ms-sdc--hero.study-intro{ font-family:'Archivo'; }
.ms-sdc--hero.study-intro .ms-sdc__inner{
  max-width:960px; display:flex; flex-direction:column; gap:26px; align-items:center;
}
.ms-sdc--hero.study-intro .ms-sdc__media{
  margin:0; border-radius:20px; overflow:hidden; box-shadow:0 8px 30px rgba(18,52,48,.10); max-width:340px;
}
.ms-sdc--hero.study-intro .ms-sdc__media img{
  width:100%; height:auto !important; min-height:auto !important; object-fit:cover !important;
  border-radius:20px; display:block;
}
.ms-sdc--hero.study-intro .ms-sdc__copy{ text-align:left; }
.ms-sdc--hero.study-intro .ms-sdc__copy blockquote{
  margin:0; padding:0; border:0; background:none;
  font-family:var(--ms-display); font-weight:600; font-size:clamp(23px,3vw,33px);
  color:#141414; line-height:1.35; letter-spacing:-.2px;
}
.ms-sdc--hero.study-intro .ms-sdc__copy blockquote em{
  font-style:normal; background:linear-gradient(transparent 60%, rgba(143,224,216,.5) 60%);
}
.ms-sdc--hero.study-intro .ms-sdc__copy > p{ color:#262626; font-size:18px; line-height:1.6; margin:26px 0 0; }
.ms-sdc--hero.study-intro .ms-sdc__copy > p:last-child{
  margin-top:18px; font-family:'Archivo'; font-weight:400; color:#262626; font-size:14px; line-height:1.4;
}
.ms-sdc--hero.study-intro .ms-sdc__copy > p:last-child strong{
  display:block; font-family:var(--ms-display); font-weight:600; color:#141414; font-size:16px; margin-bottom:2px;
}
@media (min-width:761px){
  .ms-sdc--hero.study-intro .ms-sdc__inner{ flex-direction:row; gap:48px; align-items:center; }
  /* photo LEFT (AI .why-grid: .72fr photo | 1fr text) */
  .ms-sdc--hero.study-intro .ms-sdc__media{ order:-1; flex:0 0 auto; width:40%; max-width:380px; }
  .ms-sdc--hero.study-intro .ms-sdc__copy{ flex:1; }
}
@media (max-width:760px){ .ms-sdc--hero.study-intro .ms-sdc__media{ order:-1; } }
@media (max-width:640px){
  .ms-sdc--hero.study-intro .ms-sdc__copy blockquote{ font-size:22px; }
  .ms-sdc--hero.study-intro .ms-sdc__copy > p{ font-size:18px; }
}

/* ---------- result-figure (P5) — big "79 %" copy LEFT + scan card RIGHT (grey band).
   h3 = the number (Recoleta clamp, sup = %); h2 = label; last p = petrol highlight.
   field_image = the rasterised scan figure; the flag frames it as the white card. */
.ms-sdc--hero.result-figure{ font-family:'Archivo'; }
.ms-sdc--hero.result-figure .ms-sdc__inner{
  max-width:1080px; display:flex; flex-direction:column; gap:32px; align-items:center;
}
.ms-sdc--hero.result-figure .ms-sdc__copy{ text-align:left; }
.ms-sdc--hero.result-figure .ms-sdc__copy h3{
  font-family:var(--ms-display) !important; font-weight:600 !important; color:#007375 !important;
  font-size:clamp(76px,11vw,128px) !important; line-height:.95 !important;
  letter-spacing:-3px !important; margin:0 !important;
}
/* `%` = a tight superscript hugging the 9 (AI `.num span`: .4em, vertical-align:super).
   Neutralise Bootstrap-3's sup reset (position:relative; top:-.5em) so it sits like the AI. */
.ms-sdc--hero.result-figure .ms-sdc__copy h3 sup{
  font-size:.4em; vertical-align:super; position:static; top:auto; color:#007375; line-height:0;
}
.ms-sdc--hero.result-figure .ms-sdc__copy h2{
  font-family:var(--ms-display) !important; font-weight:600 !important; color:#141414 !important;
  font-size:clamp(25px,3.2vw,34px) !important; line-height:1.14 !important;
  letter-spacing:-.3px !important; margin:4px 0 16px !important;
}
.ms-sdc--hero.result-figure .ms-sdc__copy h2::after{ content:none !important; }
.ms-sdc--hero.result-figure .ms-sdc__copy p{ color:#262626; font-size:18px; line-height:1.6; margin:0 0 14px; }
.ms-sdc--hero.result-figure .ms-sdc__copy p:last-child{ color:#115759; }
.ms-sdc--hero.result-figure .ms-sdc__copy p:last-child strong{ color:#115759; font-weight:600; }
.ms-sdc--hero.result-figure .ms-sdc__media{
  margin:0; width:100%; background:#fff; border:1px solid #E9E9E6; border-radius:20px;
  padding:34px 32px 26px; box-shadow:0 20px 50px -34px rgba(11,60,73,.4);
}
.ms-sdc--hero.result-figure .ms-sdc__media img{
  width:100%; height:auto !important; min-height:auto !important; object-fit:contain !important;
  border-radius:0; display:block;
}
@media (min-width:901px){
  .ms-sdc--hero.result-figure .ms-sdc__inner{ flex-direction:row; gap:52px; align-items:center; }
  .ms-sdc--hero.result-figure .ms-sdc__copy{ flex:.9; }
  .ms-sdc--hero.result-figure .ms-sdc__media{ flex:1.1; }
}
@media (max-width:900px){
  .ms-sdc--hero.result-figure .ms-sdc__inner{ text-align:center; }
  .ms-sdc--hero.result-figure .ms-sdc__copy{ text-align:center; }
}
@media (max-width:640px){
  .ms-sdc--hero.result-figure .ms-sdc__copy h3{ font-size:88px !important; }
  .ms-sdc--hero.result-figure .ms-sdc__copy h2{ font-size:24px !important; }
  .ms-sdc--hero.result-figure .ms-sdc__media{ padding:26px 22px 22px; }
}

/* ---------- ns-card (P11) — modifier on `nextstep`: render the petrol band as a
   rounded inset card on the white page (radius 24), matching the AI. Pair
   `on-dark nextstep`; leave field_background_color EMPTY (page stays white).
   Additive: home's plain `nextstep` (full-bleed) is untouched. */
.ms-sdc--hero.nextstep.ns-card{ padding-left:24px !important; padding-right:24px !important; }
.ms-sdc--hero.nextstep.ns-card .ms-sdc__inner{
  background:#115759; border-radius:24px; padding:clamp(32px,4vw,54px);
  box-shadow:0 20px 50px -30px rgba(11,60,73,.55); max-width:1080px;
}
@media (min-width:821px){
  .ms-sdc--hero.nextstep.ns-card .ms-sdc__inner{ gap:48px; }
}
/* AI `.ns-lead b{color:var(--gold)}` — the "kurzes Telefonat" bold is gold, not white.
   Scoped to ns-card so the homepage's plain nextstep bold stays white. */
.ms-sdc--hero.nextstep.ns-card .ms-sdc__copy p strong{ color:#F2C14E; }

/* =====================================================================
   UNTERNEHMEN — Band 13 · `unt-final` — dark petrol final CTA band:
   copy LEFT (h2 + 20px lead + orange Simple-Link CTA + <h5> who-caption)
   + field_image photo RIGHT (rounded 20). Pair `on-dark` + field bg
   #115759. Photo on top ≤820. CTA opted into the hero link gate (see
   paragraph--text-image dispatcher). Self-contained, page-independent
   flag; only used on /unternehmen. Breakpoint 820.
   ===================================================================== */
.ms-sdc--hero.unt-final,
.ms-sdc--hero.unt-final .ms-sdc__copy{ font-family:'Archivo'; }
.ms-sdc--hero.unt-final{ padding-left:20px !important; padding-right:20px !important; }
.ms-sdc--hero.unt-final .ms-sdc__inner{
  max-width:1000px; display:flex; flex-direction:column; gap:30px; align-items:center;
}
/* Copy = flex column so the CTA (rendered by the SDC AFTER the body) is lifted
   ABOVE the trailing <h5> who-caption — the design order is h2 → p → button →
   caption. (Same reorder trick as offer-card.stress-gauge.) */
.ms-sdc--hero.unt-final .ms-sdc__copy{ text-align:left; display:flex; flex-direction:column; align-items:flex-start; }
.ms-sdc--hero.unt-final .ms-sdc__actions{ order:2; }
.ms-sdc--hero.unt-final .ms-sdc__copy h5{ order:3; }
.ms-sdc--hero.unt-final .ms-sdc__copy h2{
  font-family:var(--ms-display) !important; font-weight:600 !important; color:#fff !important;
  font-size:clamp(26px,4vw,40px) !important; line-height:1.14 !important;
  letter-spacing:-.3px !important; margin:0 0 18px !important;
}
.ms-sdc--hero.unt-final .ms-sdc__copy h2::after{ content:none !important; }
.ms-sdc--hero.unt-final .ms-sdc__copy p{ color:#EAF4F4; font-size:20px; line-height:1.6; margin:0 0 30px; }
/* who-caption (<h5>) — small muted, no byline border */
.ms-sdc--hero.unt-final .ms-sdc__copy h5{
  color:#C4DCDC !important; font-size:14px !important; border:0 !important; padding:0 !important; margin:20px 0 0 !important;
}
/* orange Simple-Link CTA (mirrors offer-card/cta-card .btn skin) */
.ms-sdc--hero.unt-final .ms-sdc__actions{ margin:0; }
.ms-sdc--hero.unt-final .ms-sdc__copy a{
  display:inline-flex; align-items:center; gap:10px;
  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.unt-final .ms-sdc__copy a:hover{
  background:#E67F32 !important; color:#fff !important;
  transform:translateY(-2px); box-shadow:0 12px 30px rgba(243,149,74,.5) !important;
}
/* photo right (rounded 20) */
.ms-sdc--hero.unt-final .ms-sdc__media{ order:0; margin:0; border-radius:20px; overflow:hidden;
  box-shadow:0 14px 34px rgba(0,0,0,.28); }
.ms-sdc--hero.unt-final .ms-sdc__media img{
  width:100%; height:auto !important; min-height:auto !important; object-fit:cover !important; border-radius:20px; display:block;
}
@media (min-width:821px){
  .ms-sdc--hero.unt-final .ms-sdc__inner{ flex-direction:row; gap:44px; align-items:center; }
  .ms-sdc--hero.unt-final .ms-sdc__copy{ flex:1.05; }
  .ms-sdc--hero.unt-final .ms-sdc__media{ flex:.95; max-width:420px; }
}
@media (max-width:820px){
  .ms-sdc--hero.unt-final .ms-sdc__inner{ text-align:center; }
  .ms-sdc--hero.unt-final .ms-sdc__copy{ text-align:center; align-items:center; }
  .ms-sdc--hero.unt-final .ms-sdc__media{ order:-1; max-width:420px; }
}
@media (max-width:600px){
  .ms-sdc--hero.unt-final .ms-sdc__copy a{ width:100%; justify-content:center; }
}