/**
 * 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:none; height:auto !important; object-fit:initial !important; min-height:auto;
  border-radius:18px; display:block; margin-left:auto; margin-right:auto;
}
/* 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:761px){
  /* Match the export .founder grid (1.05fr copy / .95fr photo, ≥761 like the export's 760
     breakpoint) so the photo fills its half-column at natural aspect — no empty space beside
     a fixed-width image. Applies to Anwendungen + homepage founders (same design). */
  .ms-sdc--hero.founder .ms-sdc__inner{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
  .ms-sdc--hero.founder .ms-sdc__media img{ max-width:none !important; width:100% !important; height:auto !important; }
}
@media (max-width:760px){
  /* mobile single column: full-width centred photo (equal side gutters), like the export */
  .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:761px){
  .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; }
}

/* =====================================================================
   ZÜRICH LP (/lp/zuerich, body.lp-zuerich) — hero-layout flags. Shared page
   resets + the normal-layout zh-* flags live in normal.css (ZÜRICH LP section).
   Breakpoints = the export's 900 / 640.
   ===================================================================== */
.lp-zuerich .ms-sdc--hero .ms-sdc__copy{ text-align:left; }
.lp-zuerich .ms-sdc--hero .ms-sdc__media img{ min-height:auto; }

/* ---------- media-card — photo card with caption: hero.twig renders the image ALT as
   the name and the image TITLE as the role line (.ms-sdc__mcap) under the photo. ---------- */
.ms-sdc--hero.media-card .ms-sdc__mcap{ padding:18px 22px 22px; text-align:left; }
.ms-sdc--hero.media-card .ms-sdc__mcap-n{
  display:block; font-family:'Recoleta'; font-weight:600; font-size:21px; line-height:1.6; color:#141414;
}
.ms-sdc--hero.media-card .ms-sdc__mcap-r{
  display:block; font-family:'Archivo'; font-size:14px; line-height:1.6; color:#3D3D3D; margin-top:3px;
}

/* ---------- zh-hero — the Zürich hero (export .hero). Band = petrol field bg + optional
   field_background_image (the Zürich photo); this root paints the export's scrim over it
   (paragraph padding 0 → the root covers the whole band; inner owns 48/88 padding).
   Body: <p><em>★★★★★</em> <strong>5,0</strong> · …</p> rating · <h4> location pill ·
   <h1> (<em> mint) · lead <p> · <ul> ✓ bullets · last <p> = note under the CTA.
   CTA = tracked Simple Link (hero gate opts zh-hero in). Photo card = field_image +
   media-card (alt = name, title = role). Pair on-dark. ---------- */
.ms-sdc--hero.zh-hero{
  background:linear-gradient(95deg,rgba(12,65,67,.95) 0%,rgba(17,87,89,.85) 42%,rgba(17,87,89,.45) 70%,rgba(17,87,89,.2) 100%);
}
.ms-sdc--hero.zh-hero .ms-sdc__inner{
  max-width:1044px; margin:0 auto; display:grid; grid-template-columns:1.3fr .7fr; gap:72px; align-items:center;
  padding:48px 0 88px;
}
/* copy = 2-track grid so the CTA + note share an auto-width column (export .cta-wrap:
   inline-flex column, note centred under the button); everything else spans both. */
.ms-sdc--hero.zh-hero .ms-sdc__copy{ display:grid; grid-template-columns:auto 1fr; justify-items:start; align-self:center; }
.ms-sdc--hero.zh-hero .ms-sdc__copy > *{ grid-column:1 / -1; }
.ms-sdc--hero.zh-hero .ms-sdc__copy > .ms-sdc__actions{ grid-column:1; justify-self:stretch; text-align:center; margin:32px 0 0 !important; order:1; }
.lp-zuerich .ms-sdc--hero.zh-hero .ms-sdc__copy > p:last-of-type{
  grid-column:1; justify-self:stretch; text-align:center; font-size:14px; margin-top:10px; opacity:.8; color:#EAF4F4; order:2;
}
/* rating line (export .hrate) */
.lp-zuerich .ms-sdc--hero.zh-hero .ms-sdc__copy > p:first-child{ font-size:14.5px; line-height:1.6; color:#fff; margin:0 0 14px; }
.ms-sdc--hero.zh-hero .ms-sdc__copy > p:first-child em{ font-style:normal; color:#F5C243; letter-spacing:2px; font-size:17px; margin-right:10px; }
/* location pill (export .loc) */
.ms-sdc--hero.zh-hero .ms-sdc__copy > h4{
  display:inline-block !important; font-family:'Archivo' !important; font-weight:700 !important; font-size:14px !important;
  line-height:1.6 !important; letter-spacing:normal !important; text-transform:none !important; color:#fff !important;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:6px 14px;
  margin:0 0 22px !important;
}
.lp-zuerich .ms-sdc--hero.zh-hero .ms-sdc__copy h1{
  font-size:52px !important; line-height:1.14 !important; letter-spacing:-.01em !important; color:#fff !important;
  margin:0 !important; text-wrap:wrap;
}
.lp-zuerich .ms-sdc--hero.zh-hero .ms-sdc__copy h1 em{ color:#8FE0D8; }
.lp-zuerich .ms-sdc--hero.zh-hero .ms-sdc__copy > h1 + p{ font-size:20px; line-height:1.65; max-width:780px; margin-top:18px; color:#fff; }
.ms-sdc.ms-sdc.zh-hero .ms-sdc__copy > ul{ list-style:none; padding:0; margin:24px 0 0; display:grid; gap:10px; }
.ms-sdc.ms-sdc.zh-hero .ms-sdc__copy > ul > li{ display:flex; gap:12px; margin:0; font-size:18px; line-height:1.6; color:#fff; }
.ms-sdc.ms-sdc.zh-hero .ms-sdc__copy > ul > li::before{
  content:""; flex:none; width:22px; height:22px; margin-top:3px; border-radius:50%;
  background:#8FE0D8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%230C4143' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
}
/* photo card (export .pcard) */
.ms-sdc--hero.zh-hero .ms-sdc__media{
  margin:0; background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 22px 50px rgba(0,0,0,.30);
  max-width:340px; width:100%; justify-self:end; align-self:center;
}
.ms-sdc--hero.zh-hero .ms-sdc__media img{
  display:block; width:100%; height:auto !important; min-height:0 !important; aspect-ratio:1/1.05; object-fit:cover; object-position:62% 20%;
}
@media (max-width:900px){
  .ms-sdc--hero.zh-hero{ background:linear-gradient(180deg,rgba(12,65,67,.9),rgba(17,87,89,.88)); }
  .ms-sdc--hero.zh-hero .ms-sdc__inner{ grid-template-columns:1fr; gap:0; padding:22px 0 40px; }
  .lp-zuerich .ms-sdc--hero.zh-hero .ms-sdc__copy > p:first-child{ font-size:13.5px; margin-bottom:12px; }
  .ms-sdc--hero.zh-hero .ms-sdc__media{ display:flex; align-items:center; border-radius:18px; max-width:none; justify-self:stretch; }
  .ms-sdc--hero.zh-hero .ms-sdc__media picture{ flex:none; }
  .ms-sdc--hero.zh-hero .ms-sdc__media img{ width:110px; height:110px !important; aspect-ratio:auto; object-position:62% 18%; }
  .ms-sdc--hero.zh-hero .ms-sdc__mcap{ padding:14px 18px; min-width:0; }
}
@media (max-width:640px){
  .lp-zuerich .ms-sdc--hero.zh-hero .ms-sdc__copy h1{ font-size:30px !important; }
  .lp-zuerich .ms-sdc--hero.zh-hero .ms-sdc__copy > h1 + p{ font-size:18px; }
  .ms-sdc--hero.zh-hero .ms-sdc__copy{ grid-template-columns:1fr; justify-items:stretch; }
  .ms-sdc--hero.zh-hero .ms-sdc__copy > h4{ justify-self:start; }
  /* user request 2026-10-02 (mobile only, so the CTA lands on the first screen):
     top space −50 % (22→11), title→lead −30 % (18→13), lead→bullets −50 % (24→12) */
  .ms-sdc--hero.zh-hero .ms-sdc__inner{ padding-top:11px; }
  .lp-zuerich .ms-sdc--hero.zh-hero .ms-sdc__copy > h1 + p{ margin-top:13px; }
  .ms-sdc.ms-sdc.zh-hero .ms-sdc__copy > ul{ margin-top:12px; gap:6px; }        /* bullets 10→6 */
  .lp-zuerich .ms-sdc--hero.zh-hero .ms-sdc__copy h1{ font-size:28px !important; } /* 30→28 */
  .ms-sdc--hero.zh-hero .ms-sdc__copy > h4{ margin-bottom:11px !important; }        /* pill→h1 22→11 */
  .ms-sdc--hero.zh-hero .ms-sdc__copy > .ms-sdc__actions{ margin-top:16px !important; } /* bullets→button 32→16 */
}

/* ---------- zh-fitnote — "Du hast schon vieles ausprobiert?" (export .fit-note): white
   card = photo (field_image, 200px square) LEFT + <h3> teal + <p>. ---------- */
.ms-sdc--hero.zh-fitnote .ms-sdc__inner{
  max-width:1044px; margin:0 auto; background:#fff; border:1px solid #E9E9E6; border-radius:20px; padding:28px 32px;
  box-shadow:0 8px 26px rgba(18,52,48,.06); display:grid; grid-template-columns:200px minmax(0,1fr); gap:32px; align-items:center;
}
.ms-sdc--hero.zh-fitnote .ms-sdc__media{ order:-1; margin:0; }
.ms-sdc--hero.zh-fitnote .ms-sdc__media img{
  display:block; width:100%; height:auto !important; min-height:0 !important; aspect-ratio:1/1; object-fit:cover;
  object-position:center 25%; border-radius:16px;
}
.lp-zuerich .ms-sdc--hero.zh-fitnote .ms-sdc__copy h3{ font-size:24px !important; color:#007375 !important; margin:0 0 10px !important; }
.lp-zuerich .ms-sdc--hero.zh-fitnote .ms-sdc__copy p{ line-height:1.7; }
@media (max-width:640px){
  .ms-sdc--hero.zh-fitnote .ms-sdc__inner{ padding:22px 20px; grid-template-columns:1fr; gap:18px; }
  .ms-sdc--hero.zh-fitnote .ms-sdc__media{ max-width:200px; }
}

/* ---------- zh-case (+ zh-rev) — success-story card (export .cr / .cr.rev).
   field_image = avatar. Body: <h3> name · <h5> role · <p><strong>Vorher</strong>…</p> ·
   <p><strong>Nachher</strong>…</p> · <blockquote><p>quote</p></blockquote> · chart <ul>:
   li1 <strong>−73 %</strong>weniger Stress, li2/li3 <strong>30</strong><em>Vorher</em> /
   <strong>8</strong><em>Nachher</em>. "Stresslevel" title is baked (ul::before); the
   bar heights are set from the numbers by normal.js (msSdcZhBars). The copy wrapper is
   display:contents so its children join the card grid with the photo. ---------- */
.ms-sdc--hero.zh-case .ms-sdc__inner{
  max-width:1044px; margin:0 auto; background:#fff; border:1px solid #E9E9E6; border-radius:22px; padding:28px;
  box-shadow:0 8px 26px rgba(18,52,48,.06);
  display:grid; grid-template-columns:132px minmax(0,1fr) 260px; grid-template-rows:auto auto auto auto auto;
  column-gap:26px; row-gap:0; align-items:start;
}
.ms-sdc--hero.zh-case .ms-sdc__copy{ display:contents; }
.ms-sdc--hero.zh-case .ms-sdc__media{ grid-column:1; grid-row:1 / 3; margin:0; align-self:center; }
.ms-sdc--hero.zh-case .ms-sdc__media img{
  display:block; width:100%; height:auto !important; min-height:0 !important; aspect-ratio:1/1; border-radius:16px;
  object-fit:cover; object-position:center 20%; background:#efefef;
}
.lp-zuerich .ms-sdc--hero.zh-case .ms-sdc__copy > h3{
  grid-column:2; grid-row:1; align-self:end; font-size:28px !important; line-height:1.2 !important; color:#007375 !important;
}
.lp-zuerich .ms-sdc--hero.zh-case .ms-sdc__copy > h5{
  grid-column:2; grid-row:2; align-self:start; font-family:'Archivo'; font-weight:600; font-size:16px; line-height:1.4;
  color:#1A1A1A; margin:4px 0 0; padding:0; border:0;
}
.lp-zuerich .ms-sdc--hero.zh-case .ms-sdc__copy > p{ grid-column:1 / 3; line-height:1.65; margin:0 0 12px; }
.ms-sdc--hero.zh-case .ms-sdc__copy > p:nth-of-type(1){ grid-row:3; margin-top:18px; }
.ms-sdc--hero.zh-case .ms-sdc__copy > p:nth-of-type(2){ grid-row:4; }
.ms-sdc--hero.zh-case .ms-sdc__copy > p > strong:first-child{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; border-radius:6px;
  padding:3px 10px; margin-right:8px; vertical-align:2px; line-height:1.65; background:#FBEEEA; color:#B5483C;
}
.ms-sdc--hero.zh-case .ms-sdc__copy > p:nth-of-type(2) > strong:first-child{ background:#E6F6EC; color:#2E8B57; }
.ms-sdc--hero.zh-case .ms-sdc__copy > blockquote{
  grid-column:1 / 3; grid-row:5; margin:4px 0 0; padding:14px 0 0; border:0; border-top:1px solid #E9E9E6; background:none;
}
.lp-zuerich .ms-sdc--hero.zh-case .ms-sdc__copy > blockquote p{
  font-family:'Archivo'; font-style:italic; font-weight:400; font-size:18px; line-height:1.6; color:#1A1A1A; margin:0;
}
/* the chart card */
.ms-sdc.ms-sdc.zh-case .ms-sdc__copy > ul{
  grid-column:3; grid-row:1 / -1; align-self:stretch; list-style:none; margin:0; padding:22px 20px 18px;
  background:#efefef; border-radius:18px; text-align:center;
  display:grid; grid-template-columns:64px 64px; justify-content:center; align-content:center; column-gap:26px;
}
.ms-sdc.ms-sdc.zh-case .ms-sdc__copy > ul::before{
  content:"Stresslevel"; grid-column:1 / -1; font-family:'Recoleta'; font-weight:600; font-size:24px; line-height:1.6; color:#141414;
}
.ms-sdc.ms-sdc.zh-case .ms-sdc__copy > ul > li{ margin:0; padding:0; color:#1A1A1A; }
.ms-sdc.ms-sdc.zh-case .ms-sdc__copy > ul > li:first-child{
  grid-column:1 / -1; margin:10px 0 18px; font-family:'Archivo'; font-weight:700; font-size:12px; line-height:1.6;
  letter-spacing:1.2px; text-transform:uppercase; color:#3AA76D;
}
.lp-zuerich .ms-sdc.zh-case .ms-sdc__copy > ul > li:first-child strong{
  display:block; font-family:'Recoleta'; font-weight:600; font-size:44px; line-height:1; letter-spacing:normal;
  text-transform:none; color:#3AA76D; margin-bottom:6px;
}
.ms-sdc.ms-sdc.zh-case .ms-sdc__copy > ul > li:nth-child(n+2){
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:6px; height:230px;
}
.lp-zuerich .ms-sdc.zh-case .ms-sdc__copy > ul > li:nth-child(n+2) strong{ order:1; font-size:20px; line-height:1.6; }
.ms-sdc.ms-sdc.zh-case .ms-sdc__copy > ul > li:nth-child(n+2)::before{
  content:""; order:2; display:block; width:100%; height:var(--zh-bar, 0px); border-radius:10px 10px 4px 4px; background:#B5483C;
}
.ms-sdc.ms-sdc.zh-case .ms-sdc__copy > ul > li:nth-child(3)::before{ background:#3AA76D; }
.ms-sdc.zh-case .ms-sdc__copy > ul > li:nth-child(n+2) em{
  order:3; font-style:normal; font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; line-height:1.6;
}
/* zh-rev — chart LEFT (export .cr.rev) */
@media (min-width:901px){
  .ms-sdc--hero.zh-case.zh-rev .ms-sdc__inner{ grid-template-columns:260px 132px minmax(0,1fr); }
  .ms-sdc--hero.zh-case.zh-rev .ms-sdc__media{ grid-column:2; }
  .lp-zuerich .ms-sdc--hero.zh-case.zh-rev .ms-sdc__copy > h3,
  .lp-zuerich .ms-sdc--hero.zh-case.zh-rev .ms-sdc__copy > h5{ grid-column:3; }
  .lp-zuerich .ms-sdc--hero.zh-case.zh-rev .ms-sdc__copy > p,
  .ms-sdc--hero.zh-case.zh-rev .ms-sdc__copy > blockquote{ grid-column:2 / 4; }
  .ms-sdc.ms-sdc.zh-case.zh-rev .ms-sdc__copy > ul{ grid-column:1; }
}
@media (max-width:900px){
  .ms-sdc--hero.zh-case .ms-sdc__inner{ grid-template-columns:110px minmax(0,1fr); grid-template-rows:auto auto auto auto auto auto; }
  .ms-sdc.ms-sdc.zh-case .ms-sdc__copy > ul{ grid-column:1 / -1; grid-row:3; margin-top:18px; }
  .ms-sdc--hero.zh-case .ms-sdc__copy > p:nth-of-type(1){ grid-row:4; }
  .ms-sdc--hero.zh-case .ms-sdc__copy > p:nth-of-type(2){ grid-row:5; }
  .lp-zuerich .ms-sdc--hero.zh-case .ms-sdc__copy > p, .ms-sdc--hero.zh-case .ms-sdc__copy > blockquote{ grid-column:1 / -1; }
  .ms-sdc--hero.zh-case .ms-sdc__copy > blockquote{ grid-row:6; }
}
@media (max-width:640px){
  .ms-sdc--hero.zh-case .ms-sdc__inner{ padding:20px; grid-template-columns:88px minmax(0,1fr); column-gap:16px; }
  .lp-zuerich .ms-sdc--hero.zh-case .ms-sdc__copy > h3{ font-size:24px !important; }
  .lp-zuerich .ms-sdc--hero.zh-case .ms-sdc__copy > h5{ font-size:15px; }
}

/* ---------- zh-local — "Für Zürich. Aus der Region." (export .local): map image
   (field_image, 4:3, rounded) LEFT + h2 / lead <p> / <ul> with teal ✓ icons RIGHT. ---------- */
.ms-sdc--hero.zh-local .ms-sdc__inner{
  max-width:1044px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
}
.ms-sdc--hero.zh-local .ms-sdc__media{
  order:-1; margin:0; border-radius:20px; overflow:hidden; aspect-ratio:4/3; box-shadow:0 18px 44px rgba(18,52,48,.14);
}
.ms-sdc--hero.zh-local .ms-sdc__media picture{ display:block; height:100%; }
.ms-sdc--hero.zh-local .ms-sdc__media img{ width:100%; height:100% !important; min-height:0 !important; object-fit:cover; display:block; }
.lp-zuerich .ms-sdc--hero.zh-local .ms-sdc__copy > h2 + p{ font-size:20px; line-height:1.65; max-width:780px; margin-top:18px; }
.ms-sdc.ms-sdc.zh-local .ms-sdc__copy > ul{ list-style:none; padding:0; margin:22px 0 0; display:grid; gap:12px; }
.ms-sdc.ms-sdc.zh-local .ms-sdc__copy > ul > li{ display:flex; gap:14px; align-items:flex-start; margin:0; color:#1A1A1A; font-size:18px; line-height:1.6; }
.ms-sdc.ms-sdc.zh-local .ms-sdc__copy > ul > li::before{
  content:""; flex:none; width:24px; height:24px; margin-top:2px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007375' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/24px no-repeat;
}
@media (max-width:900px){ .ms-sdc--hero.zh-local .ms-sdc__inner{ grid-template-columns:1fr; } }
@media (max-width:640px){ .lp-zuerich .ms-sdc--hero.zh-local .ms-sdc__copy > h2 + p{ font-size:18px; } }

/* ---------- zh-final — closing CTA band (export .final): photo (field_image) LEFT +
   h2 (<em> mint) · ✓ list · lead <p> (<strong> gold) · CTA (Simple Link; hero gate
   opts zh-final in) · last <p> = signature note BELOW the CTA. Pair on-dark. ---------- */
.ms-sdc--hero.zh-final .ms-sdc__inner{
  max-width:1044px; margin:0 auto; display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:center;
}
.ms-sdc--hero.zh-final .ms-sdc__media{ order:-1; margin:0; border-radius:20px; overflow:hidden; box-shadow:0 22px 54px rgba(0,0,0,.28); }
.ms-sdc--hero.zh-final .ms-sdc__media img{
  display:block; width:100%; height:auto !important; min-height:0 !important; aspect-ratio:4/3.8; object-fit:cover; object-position:62% 25%;
}
.ms-sdc--hero.zh-final .ms-sdc__copy{ display:flex; flex-direction:column; align-items:flex-start; }
.ms-sdc.ms-sdc.zh-final .ms-sdc__copy > ul{ list-style:none; padding:0; margin:22px 0 0; display:grid; gap:10px; }
.ms-sdc.ms-sdc.zh-final .ms-sdc__copy > ul > li{ margin:0; color:#fff; font-size:18px; line-height:1.6; }
.ms-sdc.ms-sdc.zh-final .ms-sdc__copy > ul > li::before{ content:"✓ "; color:#8FE0D8; font-weight:700; }
.lp-zuerich .ms-sdc--hero.zh-final .ms-sdc__copy > ul + p{ font-size:20px; line-height:1.65; max-width:780px; margin-top:18px; }
.lp-zuerich .ms-sdc--hero.zh-final .ms-sdc__copy > ul + p strong{ color:#F2C14E; }
.ms-sdc--hero.zh-final .ms-sdc__copy > .ms-sdc__actions{ order:2; margin:30px 0 0 !important; }
.lp-zuerich .ms-sdc--hero.zh-final .ms-sdc__copy > p:last-of-type{ order:3; font-size:14px; margin-top:10px; opacity:.8; color:#EAF4F4; }
@media (max-width:900px){ .ms-sdc--hero.zh-final .ms-sdc__inner{ grid-template-columns:1fr; } }
@media (max-width:640px){
  .ms-sdc--hero.zh-final .ms-sdc__copy > .ms-sdc__actions{ align-self:stretch; }
  .lp-zuerich .ms-sdc--hero.zh-final .ms-sdc__copy > ul + p{ font-size:18px; }
}

/* ---------- founders (homepage layout reused, user decision): same 1060 column + petrol
   23px name as on the homepage (.lp-home rules), text from the Zürich export. ---------- */
.lp-zuerich .ms-sdc--hero.founder .ms-sdc__inner{ max-width:1060px; }
.lp-zuerich .ms-sdc--hero.founder .ms-sdc__copy h3{ color:var(--ms-petrol) !important; font-size:23px !important; }
/* hero base (.ms-sdc--hero .ms-sdc__copy h3) sets italic 400 / letter-spacing 0, loaded after
   normal.css → restore the page's Recoleta 600 upright + tracking on the zh hero bands */
.lp-zuerich .ms-sdc--hero.zh-case .ms-sdc__copy h3, .lp-zuerich .ms-sdc--hero.zh-fitnote .ms-sdc__copy h3,
.lp-zuerich .ms-sdc--hero.zh-local .ms-sdc__copy h2, .lp-zuerich .ms-sdc--hero.zh-final .ms-sdc__copy h2{
  font-family:'Recoleta' !important; font-weight:600 !important; font-style:normal !important;
  letter-spacing:-.01em !important; text-wrap:wrap;
}
/* ===== end ZÜRICH LP (hero) ===== */

/* =====================================================================
   STRESS-SELBSTTEST ROT (red4, body.lp-red) — hero-layout flags. Page resets + the
   normal-layout rd-* flags live in normal.css (STRESS-SELBSTTEST ROT section).
   Breakpoints = the export's 900 / 760 / 640 / 560.
   ===================================================================== */
.lp-red .ms-sdc--hero .ms-sdc__copy{ text-align:left; }
.lp-red .ms-sdc--hero .ms-sdc__media img{ min-height:auto; }
/* hero base (h1 35/white/balance, h3 italic 400) loads after normal.css → re-assert the page type */
.lp-red .ms-sdc--hero .ms-sdc__copy h1, .lp-red .ms-sdc--hero .ms-sdc__copy h2,
.lp-red .ms-sdc--hero:not(.founder) .ms-sdc__copy h3{
  font-family:'Recoleta' !important; font-weight:600 !important; font-style:normal !important;
  letter-spacing:-.01em !important; color:#141414 !important; text-align:left !important;
  margin:0 !important; padding:0 !important; text-wrap:wrap;
}
.lp-red .ms-sdc--hero .ms-sdc__copy h1{ font-size:46px !important; line-height:1.14 !important; }
.lp-red .ms-sdc--hero .ms-sdc__copy h2{ font-size:38px !important; line-height:1.18 !important; }
.lp-red .ms-sdc--hero:not(.founder) .ms-sdc__copy h3{ font-size:22px !important; line-height:1.14 !important; }
@media (max-width:900px){
  .lp-red .ms-sdc--hero .ms-sdc__copy h1{ font-size:32px !important; }
  .lp-red .ms-sdc--hero .ms-sdc__copy h2{ font-size:29px !important; }
}

/* ---------- rd-hero (+ rd-gauge) — result hero (export .hero2). The root paints the
   export's soft gradient (paragraph padding 0, field_background_color empty → the root
   covers the band; the inner owns 56/90 padding). Body: <h4> eyebrow · <h1> (<em> red) ·
   lead <p> 20 · <p> 18 · last <p> = note under the CTA. CTA = tracked Simple Link (hero gate
   opts rd-hero in). The copy is display:contents so its items share the inner grid with
   the gauge card (gauge centred against eyebrow…lead, CTA + note below in column 1, like
   the export). ≤900: one column, gauge between the leads and the CTA. ---------- */
.ms-sdc--hero.rd-hero{ background:linear-gradient(180deg,#EAF4F2 0%,#F6FAF9 100%); }
.ms-sdc--hero.rd-hero .ms-sdc__inner{
  max-width:1044px; margin:0 auto; padding:56px 0 90px;
  display:grid; grid-template-columns:1.15fr .85fr; column-gap:64px; row-gap:0; align-items:start;
}
.ms-sdc--hero.rd-hero .ms-sdc__copy{ display:contents; }
.ms-sdc--hero.rd-hero .ms-sdc__copy > *{ grid-column:1; order:1; }
/* DOM order is …lead, note <p>, actions → `order` puts the CTA before its note */
.ms-sdc--hero.rd-hero .ms-sdc__copy > h4{
  font-family:'Archivo' !important; font-weight:700 !important; font-size:13px !important; line-height:1.6 !important;
  letter-spacing:1.6px !important; text-transform:uppercase !important; color:#007375 !important; margin:0 0 14px !important;
}
.lp-red .ms-sdc--hero.rd-hero .ms-sdc__copy h1 em{ font-style:normal; color:#C8102E; }
.lp-red .ms-sdc--hero.rd-hero .ms-sdc__copy > h1 + p{ font-size:20px; line-height:1.65; max-width:780px; margin-top:18px; }
.lp-red .ms-sdc--hero.rd-hero .ms-sdc__copy > h1 + p + p{ font-size:18px; line-height:1.65; max-width:780px; margin-top:18px; }
.ms-sdc--hero.rd-hero .ms-sdc__copy > .ms-sdc__actions{ order:2; margin:30px 0 0 !important; max-width:520px; }
.lp-red .ms-sdc--hero.rd-hero .ms-sdc__copy > p:last-of-type{ order:3; font-size:14px; margin-top:10px; opacity:.8; max-width:520px; }
/* the baked gauge card (hero.twig rd-gauge branch; number + arc from ?score= via normal.js) */
.ms-sdc--hero.rd-hero .ms-sdc__rdgauge{
  grid-column:2; grid-row:1 / 5; align-self:center; margin:0; overflow:visible;
  background:#fff; border-radius:22px; padding:30px 28px 26px; text-align:center; box-shadow:0 24px 60px rgba(18,52,48,.12);
}
.ms-sdc__rdgauge svg{ display:block; width:100%; max-width:360px; height:auto; margin:0 auto; }
.ms-sdc__rdgauge .rdg-num{ font-family:'Recoleta'; font-weight:600; font-size:64px; fill:#C8102E; }
.ms-sdc__rdgauge .rdg-of{ font-family:'Archivo'; font-weight:700; font-size:18px; fill:#3D3D3D; }
.ms-sdc__rdgauge .rdg-lab{ font-family:'Archivo'; font-weight:700; font-size:12px; fill:#3D3D3D; }
.ms-sdc__rdgauge .rdg-badge{
  display:inline-block; margin-top:6px; background:#F8E2E6; color:#C8102E; font-family:'Archivo'; font-weight:700;
  font-size:15px; line-height:1.6; border-radius:999px; padding:7px 16px;
}
.ms-sdc__rdgauge .rdg-scale{
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:18px;
  font-family:'Archivo'; font-size:13px; line-height:1.35; color:#141414;
}
.ms-sdc__rdgauge .rdg-scale > div{ border-radius:10px; padding:8px 6px; background:#efefef; }
.ms-sdc__rdgauge .rdg-scale > .on{ background:#F8E2E6; color:#C8102E; font-weight:700; }
.lp-red .ms-sdc__rdgauge p.rdg-disc{ font-size:13px; line-height:1.6; margin-top:14px; color:#3D3D3D; }
@media (max-width:900px){
  .ms-sdc--hero.rd-hero .ms-sdc__inner{ grid-template-columns:1fr; padding:32px 0 64px; }
  .ms-sdc--hero.rd-hero .ms-sdc__copy > *{ order:1; }
  .ms-sdc--hero.rd-hero .ms-sdc__rdgauge{ grid-column:1; grid-row:auto; order:2; margin-top:28px; }
  .ms-sdc--hero.rd-hero .ms-sdc__copy > .ms-sdc__actions{ order:3; margin-top:28px !important; max-width:none; }
  .lp-red .ms-sdc--hero.rd-hero .ms-sdc__copy > p:last-of-type{ order:4; max-width:none; }
}
@media (max-width:640px){ .lp-red .ms-sdc--hero.rd-hero .ms-sdc__copy > h1 + p{ font-size:18px; } }
@media (max-width:560px){ .ms-sdc__rdgauge .rdg-scale{ font-size:12px; } }

/* ---------- rd-split (+ rd-ok) — head + list beside a photo (export .row.rowb).
   Body: <h2> + lead <p> (span both columns) · <ul> LEFT beside field_image RIGHT ·
   trailing <blockquote><p> note / <p> span both columns. <ul> = red dots; `rd-ok` = teal ✓
   circles. Note teal, red with head-neg. The copy is display:contents (grid with the photo).
   ≤900: one column, photo after the list. ---------- */
.ms-sdc--hero.rd-split .ms-sdc__inner{
  max-width:1044px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; column-gap:72px; row-gap:0; align-items:start;
}
.ms-sdc--hero.rd-split .ms-sdc__copy{ display:contents; }
.ms-sdc--hero.rd-split .ms-sdc__copy > *{ grid-column:1 / -1; }
.ms-sdc--hero.rd-split .ms-sdc__copy > h2{ grid-row:1; }
.lp-red .ms-sdc--hero.rd-split .ms-sdc__copy > h2 + p{ grid-row:2; font-size:20px; line-height:1.65; margin-top:18px; }
.ms-sdc.ms-sdc.rd-split .ms-sdc__copy > ul{
  grid-column:1; grid-row:3; list-style:none; padding:0; margin:34px 0 0; display:grid; gap:14px;
}
.ms-sdc.ms-sdc.rd-split .ms-sdc__copy > ul > li{
  position:relative; margin:0; padding-left:22px; font-size:18px; line-height:1.6; color:#1A1A1A;
}
.ms-sdc.ms-sdc.rd-split .ms-sdc__copy > ul > li::before{
  content:""; position:absolute; left:0; top:11px; width:8px; height:8px; border-radius:50%; background:#C8102E;
}
.ms-sdc.ms-sdc.rd-split.rd-ok .ms-sdc__copy > ul > li{ padding-left:38px; }
.ms-sdc.ms-sdc.rd-split.rd-ok .ms-sdc__copy > ul > li::before{
  top:2px; width:24px; height:24px;
  background:#007375 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat;
}
.ms-sdc--hero.rd-split .ms-sdc__media{
  grid-column:2; grid-row:3; margin:34px 0 0; border-radius:26px; overflow:hidden; box-shadow:0 22px 56px rgba(18,52,48,.12);
}
.ms-sdc--hero.rd-split .ms-sdc__media img{ display:block; width:100%; height:auto !important; min-height:0 !important; object-fit:cover; }
.lp-red .ms-sdc--hero.rd-split .ms-sdc__copy > blockquote{ margin:30px 0 0; padding:0; border:0; background:none; }
.lp-red .ms-sdc--hero.rd-split .ms-sdc__copy > blockquote p{
  font-family:'Recoleta'; font-weight:600; font-size:26px; line-height:1.3; color:#007375; margin:0;
}
.lp-red .ms-sdc--hero.rd-split.head-neg .ms-sdc__copy > blockquote p{ color:#C8102E; }
.lp-red .ms-sdc--hero.rd-split .ms-sdc__copy > blockquote + p{ margin-top:10px; }
.lp-red .ms-sdc--hero.rd-split .ms-sdc__copy > ul + p{ margin-top:36px; }
.lp-red .ms-sdc--hero.rd-split.rd-ok .ms-sdc__copy > blockquote + p{ margin-top:24px; } /* export inline 24 (band 20) */
@media (max-width:900px){
  .ms-sdc--hero.rd-split .ms-sdc__inner{ grid-template-columns:1fr; }
  .ms-sdc--hero.rd-split .ms-sdc__copy > *, .ms-sdc--hero.rd-split .ms-sdc__copy > h2,
  .lp-red .ms-sdc--hero.rd-split .ms-sdc__copy > h2 + p{ grid-row:auto; order:1; }
  .ms-sdc.ms-sdc.rd-split .ms-sdc__copy > ul{ grid-column:1; grid-row:auto; order:2; margin-top:24px; }
  .ms-sdc--hero.rd-split .ms-sdc__media{ grid-column:1; grid-row:auto; order:3; margin-top:28px; }
  .ms-sdc--hero.rd-split .ms-sdc__copy > ul ~ *{ order:4; }
  .lp-red .ms-sdc--hero.rd-split .ms-sdc__copy > blockquote p{ font-size:22px; }
}
@media (max-width:640px){ .lp-red .ms-sdc--hero.rd-split .ms-sdc__copy > h2 + p{ font-size:18px; } }

/* ---------- rd-sci — fMRT proof card (export .sci): white card, field_image photo LEFT
   (rounded 16) + copy RIGHT: <p> · <p><em>79 %</em></p> = big teal Recoleta number · <p>.
   ≤900 one column, photo on top. ---------- */
.ms-sdc--hero.rd-sci .ms-sdc__inner{
  max-width:1044px; margin:0 auto; background:#fff; border-radius:26px; padding:34px;
  box-shadow:0 10px 30px rgba(18,52,48,.06); display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center;
}
.ms-sdc--hero.rd-sci .ms-sdc__media{ order:-1; margin:0; }
.ms-sdc--hero.rd-sci .ms-sdc__media img{ display:block; width:100%; height:auto !important; min-height:0 !important; border-radius:16px; }
.lp-red .ms-sdc--hero.rd-sci .ms-sdc__copy > p + p{ margin-top:14px; }
.lp-red .ms-sdc--hero.rd-sci .ms-sdc__copy > p > em{
  display:block; font-family:'Recoleta'; font-weight:600; font-style:normal; font-size:72px; line-height:1; color:#007375;
}
@media (max-width:900px){ .ms-sdc--hero.rd-sci .ms-sdc__inner{ grid-template-columns:1fr; gap:28px; padding:22px; } }

/* ---------- rd-offer (+ media-card) — "Deine kostenlose Stress-Analyse" (export .offer4).
   field_image Pascal LEFT (sticky; ALT = name, TITLE = role caption via media-card) +
   copy RIGHT: <h2> · lead <p> · 1st <ul> = white pills · <blockquote> = white box (<h3> +
   <ul> ✓) · <p> · <h3> · <p> · <p> · CTA (Simple Link; hero gate opts rd-offer in) · last <p>
   = note under the CTA. ≤900 one column, photo static, CTA centred. ---------- */
.ms-sdc--hero.rd-offer .ms-sdc__inner{
  max-width:1044px; margin:0 auto; display:grid; grid-template-columns:.8fr 1.2fr; gap:64px; align-items:start;
}
.ms-sdc--hero.rd-offer .ms-sdc__media{ order:-1; margin:0; overflow:visible; position:sticky; top:30px; }
.ms-sdc--hero.rd-offer .ms-sdc__media picture{
  display:block; border-radius:26px; overflow:hidden; box-shadow:0 22px 56px rgba(18,52,48,.12);
}
.ms-sdc--hero.rd-offer .ms-sdc__media img{ display:block; width:100%; height:auto !important; min-height:0 !important; object-fit:cover; }
.ms-sdc--hero.rd-offer.media-card .ms-sdc__mcap{ padding:14px 0 0; }
.ms-sdc--hero.rd-offer.media-card .ms-sdc__mcap-n{ font-family:'Archivo'; font-weight:700; font-size:18px; line-height:1.6; color:#141414; }
.ms-sdc--hero.rd-offer.media-card .ms-sdc__mcap-r{ font-family:'Archivo'; font-size:15px; line-height:1.6; color:#1A1A1A; margin-top:0; }
.ms-sdc--hero.rd-offer .ms-sdc__copy{ display:flex; flex-direction:column; align-items:flex-start; }
.ms-sdc--hero.rd-offer .ms-sdc__copy > *{ order:1; align-self:stretch; }
.lp-red .ms-sdc--hero.rd-offer .ms-sdc__copy > p{ margin-top:14px; }
.lp-red .ms-sdc--hero.rd-offer .ms-sdc__copy > h2 + p{ font-size:20px; line-height:1.65; }
.ms-sdc.ms-sdc.rd-offer .ms-sdc__copy > ul:first-of-type{
  list-style:none; padding:0; margin:20px 0 0; display:flex; flex-wrap:wrap; gap:8px;
}
.ms-sdc.ms-sdc.rd-offer .ms-sdc__copy > ul:first-of-type > li{
  margin:0; font-size:15px; font-weight:700; line-height:1.6; border-radius:999px; padding:7px 15px; background:#fff; color:#007375;
}
.lp-red .ms-sdc--hero.rd-offer .ms-sdc__copy > blockquote{
  margin:26px 0 0; padding:30px 32px; border:0; border-radius:22px; background:#fff;
}
.lp-red .ms-sdc--hero.rd-offer .ms-sdc__copy h3{ margin-top:30px !important; }
.lp-red .ms-sdc--hero.rd-offer .ms-sdc__copy > blockquote > h3{ margin-top:0 !important; }
.ms-sdc.ms-sdc.rd-offer .ms-sdc__copy > blockquote > ul{ list-style:none; padding:0; margin:26px 0 0; display:grid; gap:14px; }
.ms-sdc.ms-sdc.rd-offer .ms-sdc__copy > blockquote > ul > li{
  position:relative; margin:0; padding-left:38px; font-family:'Archivo'; font-size:18px; line-height:1.6; color:#1A1A1A;
}
.ms-sdc.ms-sdc.rd-offer .ms-sdc__copy > blockquote > ul > li::before{
  content:""; position:absolute; left:0; top:2px; width:24px; height:24px; border-radius:50%;
  background:#007375 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat;
}
.lp-red .ms-sdc--hero.rd-offer .ms-sdc__copy > p:nth-last-of-type(2){ margin-top:24px; }
.ms-sdc--hero.rd-offer .ms-sdc__copy > .ms-sdc__actions{ order:2; align-self:flex-start; margin:34px 0 0 !important; }
.lp-red .ms-sdc--hero.rd-offer .ms-sdc__copy > p:last-of-type{ order:3; font-size:14px; margin-top:10px; opacity:.8; }
@media (max-width:900px){
  .ms-sdc--hero.rd-offer .ms-sdc__inner{ grid-template-columns:1fr; gap:28px; }
  .ms-sdc--hero.rd-offer .ms-sdc__media{ position:static; }
  .ms-sdc--hero.rd-offer .ms-sdc__copy > .ms-sdc__actions{ align-self:center; }
  .lp-red .ms-sdc--hero.rd-offer .ms-sdc__copy > p:last-of-type{ text-align:center; }
}
@media (max-width:640px){
  .lp-red .ms-sdc--hero.rd-offer .ms-sdc__copy > h2 + p{ font-size:18px; }
  .ms-sdc--hero.rd-offer .ms-sdc__copy > .ms-sdc__actions{ align-self:stretch; }
}

/* ---------- reused flags — `.lp-zuerich` page rules mirrored for this page ---------- */
/* founder (homepage layout, user decision): 1060 column + petrol 23px name */
.lp-red .ms-sdc--hero.founder .ms-sdc__inner{ max-width:1060px; }
.lp-red .ms-sdc--hero.founder .ms-sdc__copy h3{ color:var(--ms-petrol) !important; font-size:23px !important; }
/* zh-case / zh-rev (Zürich success-story card), this page's red #C8102E / #FDECEE */
.lp-red .ms-sdc--hero.zh-case .ms-sdc__copy h3{
  font-family:'Recoleta' !important; font-weight:600 !important; font-style:normal !important; letter-spacing:-.01em !important;
}
.lp-red .ms-sdc--hero.zh-case .ms-sdc__copy > h3{
  grid-column:2; grid-row:1; align-self:end; font-size:28px !important; line-height:1.2 !important; color:#007375 !important;
}
.lp-red .ms-sdc--hero.zh-case .ms-sdc__copy > h5{
  grid-column:2; grid-row:2; align-self:start; font-family:'Archivo'; font-weight:600; font-size:16px; line-height:1.4;
  color:#1A1A1A; margin:4px 0 0; padding:0; border:0;
}
.lp-red .ms-sdc--hero.zh-case .ms-sdc__copy > p{ grid-column:1 / 3; line-height:1.65; margin:0 0 12px; }
.lp-red .ms-sdc--hero.zh-case .ms-sdc__copy > p:nth-of-type(1){ margin-top:18px; }
.lp-red .ms-sdc--hero.zh-case .ms-sdc__copy > p > strong:first-child{ background:#FDECEE; color:#C8102E; }
.lp-red .ms-sdc--hero.zh-case .ms-sdc__copy > p:nth-of-type(2) > strong:first-child{ background:#E6F6EC; color:#2E8B57; }
.lp-red .ms-sdc--hero.zh-case .ms-sdc__copy > blockquote p{
  font-family:'Archivo'; font-style:italic; font-weight:400; font-size:18px; line-height:1.6; color:#1A1A1A; margin:0;
}
.lp-red .ms-sdc.zh-case .ms-sdc__copy > ul > li:first-child strong{
  display:block; font-family:'Recoleta'; font-weight:600; font-size:44px; line-height:1; letter-spacing:normal;
  text-transform:none; color:#3AA76D; margin-bottom:6px;
}
.lp-red .ms-sdc.zh-case .ms-sdc__copy > ul > li:nth-child(n+2) strong{ order:1; font-size:20px; line-height:1.6; }
.lp-red .ms-sdc.ms-sdc.zh-case .ms-sdc__copy > ul > li:nth-child(2)::before{ background:#C8102E; }
@media (min-width:901px){
  .lp-red .ms-sdc--hero.zh-case.zh-rev .ms-sdc__copy > h3,
  .lp-red .ms-sdc--hero.zh-case.zh-rev .ms-sdc__copy > h5{ grid-column:3; }
  .lp-red .ms-sdc--hero.zh-case.zh-rev .ms-sdc__copy > p{ grid-column:2 / 4; }
}
@media (max-width:900px){ .lp-red .ms-sdc--hero.zh-case .ms-sdc__copy > p{ grid-column:1 / -1; } }
@media (max-width:640px){
  .lp-red .ms-sdc--hero.zh-case .ms-sdc__copy > h3{ font-size:24px !important; }
  .lp-red .ms-sdc--hero.zh-case .ms-sdc__copy > h5{ font-size:15px; }
}
/* ≤900 the export frames these photos 4:3.4 (its mobile .media); the <source> swap to the
   uploaded 4:3.4 crop only happens ≤768, so 769–900 crops the desktop file the same way. */
@media (max-width:900px){
  .ms-sdc--hero.rd-offer .ms-sdc__media img,
  .ms-sdc--hero.rd-split.rd-ok .ms-sdc__media img{ aspect-ratio:4/3.4; object-fit:cover; }
  .ms-sdc--hero.rd-split.rd-ok .ms-sdc__media img{ object-position:58% 20%; }
}
/* Michaela (founder-textleft) ≤760 = the export's mobile order: text (h2 is the band above) →
   photo → caption. The copy is display:contents so its items join the inner flex column; the
   <h3> name + <h5> role move UNDER the photo and take the export .cap style (Archivo 18 bold /
   15). Desktop keeps the homepage founder layout. */
@media (max-width:760px){
  .lp-red .ms-sdc--hero.founder.founder-textleft .ms-sdc__inner{ gap:0; }
  .lp-red .ms-sdc--hero.founder.founder-textleft .ms-sdc__copy{ display:contents; }
  .lp-red .ms-sdc--hero.founder.founder-textleft .ms-sdc__copy > p{ order:1; margin:18px 0 0; }  /* export .row p */
  .lp-red .ms-sdc--hero.founder.founder-textleft .ms-sdc__media{ order:2; margin-top:28px; }
  .lp-red .ms-sdc--hero.founder.founder-textleft .ms-sdc__copy > h3{
    order:3; margin:14px 0 0 !important; font-family:'Archivo' !important; font-weight:700 !important;
    font-size:18px !important; line-height:1.6 !important; letter-spacing:normal !important; color:#141414 !important;
  }
  .lp-red .ms-sdc--hero.founder.founder-textleft .ms-sdc__copy > h5{
    order:4; margin:0; font-family:'Archivo'; font-weight:400; font-size:15px; line-height:1.6; color:#1A1A1A;
  }
}
/* ===== end STRESS-SELBSTTEST ROT (hero) ===== */

/* =====================================================================
   STRESS-SELBSTTEST GELB (yellow-5, body.lp-yellow) — hero-layout flags. Reuses the ROT
   hero flags (rd-hero · rd-split/rd-ok · rd-sci · rd-offer · founder · zh-case); their
   `.lp-red` page rules are MIRRORED here under `.lp-yellow` (ROT untouched). New: ye-gauge
   (yellow gauge card, hero.twig branch) and ye-rowb (photo stretched to the list height).
   Page resets + the normal-layout flags: normal.css (STRESS-SELBSTTEST GELB section).
   ===================================================================== */
.lp-yellow .ms-sdc--hero .ms-sdc__copy{ text-align:left; }
.lp-yellow .ms-sdc--hero .ms-sdc__media img{ min-height:auto; }
.lp-yellow .ms-sdc--hero .ms-sdc__copy h1, .lp-yellow .ms-sdc--hero .ms-sdc__copy h2,
.lp-yellow .ms-sdc--hero:not(.founder) .ms-sdc__copy h3{
  font-family:'Recoleta' !important; font-weight:600 !important; font-style:normal !important;
  letter-spacing:-.01em !important; color:#141414 !important; text-align:left !important;
  margin:0 !important; padding:0 !important; text-wrap:wrap;
}
.lp-yellow .ms-sdc--hero .ms-sdc__copy h1{ font-size:46px !important; line-height:1.14 !important; }
.lp-yellow .ms-sdc--hero .ms-sdc__copy h2{ font-size:38px !important; line-height:1.18 !important; }
.lp-yellow .ms-sdc--hero:not(.founder) .ms-sdc__copy h3{ font-size:22px !important; line-height:1.14 !important; }
@media (max-width:900px){
  .lp-yellow .ms-sdc--hero .ms-sdc__copy h1{ font-size:32px !important; }
  .lp-yellow .ms-sdc--hero .ms-sdc__copy h2{ font-size:29px !important; }
}
@media (max-width:640px){ .lp-yellow .ms-sdc--hero .ms-sdc__copy h1{ font-size:29px !important; } }

/* ---------- rd-hero + ye-gauge — result hero (export .hero2). Body: <h4> eyebrow · <h1>
   (<em> accent) · lead <p> 20 · lead <p> 20 · <p> note under the CTA · LAST <p> = rating row
   (<em>★★★★★</em><strong>5,0</strong> · über 70 Bewertungen). Desktop: gauge right of
   eyebrow…2nd lead, CTA + note + rating below in column 1. ≤900 (export order): eyebrow, h1,
   lead 1 → gauge → lead 2 → CTA → note → rating, 20px rhythm. ---------- */
.lp-yellow .ms-sdc--hero.rd-hero .ms-sdc__inner{ padding:56px 0 28px; }
.lp-yellow .ms-sdc--hero.rd-hero .ms-sdc__copy h1 em{ font-style:normal; color:#C2570F; }
.lp-yellow .ms-sdc--hero.rd-hero .ms-sdc__copy > h1 + p,
.lp-yellow .ms-sdc--hero.rd-hero .ms-sdc__copy > h1 + p + p{ font-size:20px; line-height:1.65; max-width:780px; margin-top:18px; }
.lp-yellow .ms-sdc--hero.rd-hero .ms-sdc__copy > p:nth-last-of-type(2){
  order:3; font-size:14px; line-height:1.6; margin-top:10px; opacity:.8; max-width:472px;
}
.lp-yellow .ms-sdc--hero.rd-hero .ms-sdc__copy > p:last-of-type{
  order:4; margin-top:14px; font-size:16px; line-height:1.8; color:#141414;
}
.lp-yellow .ms-sdc--hero.rd-hero .ms-sdc__copy > p:last-of-type em{
  font-style:normal; color:#F2C14E; font-size:18px; letter-spacing:2px; margin-right:10px; vertical-align:-1px;
}
/* yellow gauge defaults (export state at score 21; normal.js recolours from ?score=) */
.ms-sdc__rdgauge.ms-sdc__yegauge .rdg-num{ fill:#EE7D3C; }
.ms-sdc__rdgauge.ms-sdc__yegauge .rdg-badge{ background:#FDEFE8; color:#EE7D3C; }
.ms-sdc__rdgauge.ms-sdc__yegauge .rdg-scale > .on{ background:#FDEFE8; color:#EE7D3C; }
.lp-yellow .ms-sdc__rdgauge p.rdg-disc{ font-size:13px; line-height:1.6; margin-top:14px; color:#3D3D3D; }
@media (max-width:900px){
  .lp-yellow .ms-sdc--hero.rd-hero .ms-sdc__inner{ padding:32px 0 24px; }
  .lp-yellow .ms-sdc--hero.rd-hero .ms-sdc__rdgauge{ order:2; margin-top:20px; }
  .lp-yellow .ms-sdc--hero.rd-hero .ms-sdc__copy > h1 + p + p{ order:3; margin-top:24px; }
  .lp-yellow .ms-sdc--hero.rd-hero .ms-sdc__copy > .ms-sdc__actions{ order:4; margin-top:20px !important; }
  .lp-yellow .ms-sdc--hero.rd-hero .ms-sdc__copy > p:nth-last-of-type(2){ order:5; max-width:none; }
  .lp-yellow .ms-sdc--hero.rd-hero .ms-sdc__copy > p:last-of-type{ order:6; }
}
@media (max-width:640px){
  .lp-yellow .ms-sdc--hero.rd-hero .ms-sdc__inner{ padding-top:20px; }
  .lp-yellow .ms-sdc--hero.rd-hero .ms-sdc__copy > h1 + p,
  .lp-yellow .ms-sdc--hero.rd-hero .ms-sdc__copy > h1 + p + p{ font-size:18px; }
  .lp-yellow .ms-sdc--hero.rd-hero .ms-sdc__rdgauge{ padding:16px 16px 14px; }
  .lp-yellow .ms-sdc--hero.rd-hero .ms-sdc__rdgauge svg{ max-width:250px; }
  .lp-yellow .ms-sdc--hero.rd-hero .ms-sdc__rdgauge .rdg-scale{ margin-top:10px; }
  .lp-yellow .ms-sdc--hero.rd-hero .ms-sdc__rdgauge p.rdg-disc{ margin-top:8px; }
}

/* ---------- rd-split (+ rd-ok) mirrored + ye-rowb — the photo STRETCHES to the list's height
   (export .rowb: min 420, object-fit cover); ≤900 a 3:2 frame (also for rd-ok — the export
   drops the 4:3.4 crop here). Intro <p> 18px (user decision). ---------- */
.lp-yellow .ms-sdc--hero.rd-split .ms-sdc__copy > h2 + p{ grid-row:2; font-size:18px; line-height:1.65; margin-top:18px; }
.lp-yellow .ms-sdc.ms-sdc.rd-split:not(.rd-ok) .ms-sdc__copy > ul > li::before{ background:#C2570F; }
.lp-yellow .ms-sdc--hero.rd-split .ms-sdc__copy > blockquote{ margin:30px 0 0; padding:0; border:0; background:none; }
.lp-yellow .ms-sdc--hero.rd-split .ms-sdc__copy > blockquote p{
  font-family:'Recoleta'; font-weight:600; font-size:26px; line-height:1.3; color:#007375; margin:0;
}
.lp-yellow .ms-sdc--hero.rd-split.head-neg .ms-sdc__copy > blockquote p{ color:#C2570F; }
.lp-yellow .ms-sdc--hero.rd-split .ms-sdc__copy > blockquote + p{ margin-top:10px; }
.lp-yellow .ms-sdc--hero.rd-split .ms-sdc__copy > ul + p{ margin-top:36px; }
.lp-yellow .ms-sdc--hero.rd-split.rd-ok .ms-sdc__copy > blockquote + p{ margin-top:24px; }
.ms-sdc--hero.rd-split.ye-rowb .ms-sdc__media{ align-self:stretch; min-height:420px; }
.ms-sdc--hero.rd-split.ye-rowb .ms-sdc__media picture{ display:block; height:100%; }
.ms-sdc--hero.rd-split.ye-rowb .ms-sdc__media img{ height:100% !important; object-fit:cover; object-position:50% 50%; }
.ms-sdc--hero.rd-split.rd-ok.ye-rowb .ms-sdc__media img{ object-position:58% 20%; }
@media (max-width:900px){
  .lp-yellow .ms-sdc--hero.rd-split .ms-sdc__copy > h2 + p{ grid-row:auto; order:1; }
  .lp-yellow .ms-sdc--hero.rd-split .ms-sdc__copy > blockquote p{ font-size:22px; }
  .ms-sdc--hero.rd-split.ye-rowb .ms-sdc__media{ min-height:0; aspect-ratio:3/2; }
  .ms-sdc--hero.rd-split.rd-ok.ye-rowb .ms-sdc__media img{ aspect-ratio:auto; }
}

/* ---------- rd-sci mirrored ---------- */
.lp-yellow .ms-sdc--hero.rd-sci .ms-sdc__copy > p + p{ margin-top:14px; }
.lp-yellow .ms-sdc--hero.rd-sci .ms-sdc__copy > p > em{
  display:block; font-family:'Recoleta'; font-weight:600; font-style:normal; font-size:72px; line-height:1; color:#007375;
}

/* ---------- rd-offer (+ media-card) mirrored — intro 18px (user decision); CTA 48px below
   the copy (export .cta-c), note as wide as the button, left (centred ≤900). ---------- */
.lp-yellow .ms-sdc--hero.rd-offer .ms-sdc__copy > p{ margin-top:14px; }
.lp-yellow .ms-sdc--hero.rd-offer .ms-sdc__copy > h2 + p{ font-size:18px; line-height:1.65; }
.lp-yellow .ms-sdc--hero.rd-offer .ms-sdc__copy > blockquote{
  margin:26px 0 0; padding:30px 32px; border:0; border-radius:22px; background:#fff;
}
.lp-yellow .ms-sdc--hero.rd-offer .ms-sdc__copy h3{ margin-top:30px !important; }
.lp-yellow .ms-sdc--hero.rd-offer .ms-sdc__copy > blockquote > h3{ margin-top:0 !important; }
.lp-yellow .ms-sdc--hero.rd-offer .ms-sdc__copy > p:nth-last-of-type(2){ margin-top:24px; }
.lp-yellow .ms-sdc--hero.rd-offer .ms-sdc__copy > .ms-sdc__actions{ margin-top:48px !important; }
.lp-yellow .ms-sdc--hero.rd-offer .ms-sdc__copy > p:last-of-type{ order:3; font-size:14px; margin-top:10px; opacity:.8; max-width:472px; align-self:flex-start; }
@media (max-width:900px){
  .lp-yellow .ms-sdc--hero.rd-offer .ms-sdc__copy > p:last-of-type{ text-align:center; align-self:center; }
}
@media (max-width:760px){ .lp-yellow .ms-sdc--hero.rd-offer .ms-sdc__copy > .ms-sdc__actions{ margin-top:36px !important; } }
@media (max-width:640px){
  .lp-yellow .ms-sdc--hero.rd-offer .ms-sdc__copy > p:last-of-type{ max-width:none; align-self:stretch; }
}

/* ---------- founder (homepage layout, as on ROT) mirrored ---------- */
.lp-yellow .ms-sdc--hero.founder .ms-sdc__inner{ max-width:1060px; }
.lp-yellow .ms-sdc--hero.founder .ms-sdc__copy h3{ color:var(--ms-petrol) !important; font-size:23px !important; }
@media (max-width:760px){
  .lp-yellow .ms-sdc--hero.founder.founder-textleft .ms-sdc__inner{ gap:0; }
  .lp-yellow .ms-sdc--hero.founder.founder-textleft .ms-sdc__copy{ display:contents; }
  .lp-yellow .ms-sdc--hero.founder.founder-textleft .ms-sdc__copy > p{ order:1; margin:18px 0 0; }
  .lp-yellow .ms-sdc--hero.founder.founder-textleft .ms-sdc__media{ order:2; margin-top:28px; }
  .lp-yellow .ms-sdc--hero.founder.founder-textleft .ms-sdc__copy > h3{
    order:3; margin:14px 0 0 !important; font-family:'Archivo' !important; font-weight:700 !important;
    font-size:18px !important; line-height:1.6 !important; letter-spacing:normal !important; color:#141414 !important;
  }
  .lp-yellow .ms-sdc--hero.founder.founder-textleft .ms-sdc__copy > h5{
    order:4; margin:0; font-family:'Archivo'; font-weight:400; font-size:15px; line-height:1.6; color:#1A1A1A;
  }
}

/* ---------- zh-case / zh-rev (Zürich success-story card) mirrored — yellow accent:
   "Vorher" tag #C2570F on #FDF0E6, Vorher bar #EE7D3C ---------- */
.lp-yellow .ms-sdc--hero.zh-case .ms-sdc__copy h3{
  font-family:'Recoleta' !important; font-weight:600 !important; font-style:normal !important; letter-spacing:-.01em !important;
}
.lp-yellow .ms-sdc--hero.zh-case .ms-sdc__copy > h3{
  grid-column:2; grid-row:1; align-self:end; font-size:28px !important; line-height:1.2 !important; color:#007375 !important;
}
.lp-yellow .ms-sdc--hero.zh-case .ms-sdc__copy > h5{
  grid-column:2; grid-row:2; align-self:start; font-family:'Archivo'; font-weight:600; font-size:16px; line-height:1.4;
  color:#1A1A1A; margin:4px 0 0; padding:0; border:0;
}
.lp-yellow .ms-sdc--hero.zh-case .ms-sdc__copy > p{ grid-column:1 / 3; line-height:1.65; margin:0 0 12px; }
.lp-yellow .ms-sdc--hero.zh-case .ms-sdc__copy > p:nth-of-type(1){ margin-top:18px; }
.lp-yellow .ms-sdc--hero.zh-case .ms-sdc__copy > p > strong:first-child{ background:#FDF0E6; color:#C2570F; }
.lp-yellow .ms-sdc--hero.zh-case .ms-sdc__copy > p:nth-of-type(2) > strong:first-child{ background:#E6F6EC; color:#2E8B57; }
.lp-yellow .ms-sdc--hero.zh-case .ms-sdc__copy > blockquote p{
  font-family:'Archivo'; font-style:italic; font-weight:400; font-size:18px; line-height:1.6; color:#1A1A1A; margin:0;
}
.lp-yellow .ms-sdc.zh-case .ms-sdc__copy > ul > li:first-child strong{
  display:block; font-family:'Recoleta'; font-weight:600; font-size:44px; line-height:1; letter-spacing:normal;
  text-transform:none; color:#3AA76D; margin-bottom:6px;
}
.lp-yellow .ms-sdc.zh-case .ms-sdc__copy > ul > li:nth-child(n+2) strong{ order:1; font-size:20px; line-height:1.6; }
.lp-yellow .ms-sdc.ms-sdc.zh-case .ms-sdc__copy > ul > li:nth-child(2)::before{ background:#EE7D3C; }
@media (min-width:901px){
  .lp-yellow .ms-sdc--hero.zh-case.zh-rev .ms-sdc__copy > h3,
  .lp-yellow .ms-sdc--hero.zh-case.zh-rev .ms-sdc__copy > h5{ grid-column:3; }
  .lp-yellow .ms-sdc--hero.zh-case.zh-rev .ms-sdc__copy > p{ grid-column:2 / 4; }
}
@media (max-width:900px){ .lp-yellow .ms-sdc--hero.zh-case .ms-sdc__copy > p{ grid-column:1 / -1; } }
@media (max-width:640px){
  .lp-yellow .ms-sdc--hero.zh-case .ms-sdc__copy > h3{ font-size:24px !important; }
  .lp-yellow .ms-sdc--hero.zh-case .ms-sdc__copy > h5{ font-size:15px; }
}
/* ---------- ye-founder (+ media-card) — Michaela exactly as the export's .row.rev (user request
   2026-10-20; replaces the homepage founder layout here): copy LEFT (4 <p>, 18/1.65, 18px apart),
   field_image RIGHT (4:4.6, radius 26, soft shadow, cover) with the caption UNDER the photo via
   media-card (ALT = name, Archivo 18 bold · TITLE = role, 15px). Columns 1fr 1fr, gap 48, centred.
   ≤900 one column: text → photo (4:3.4) → caption, 48px gap. ---------- */
.ms-sdc--hero.ye-founder .ms-sdc__inner{
  max-width:1044px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:48px; align-items:center;
}
.ms-sdc--hero.ye-founder .ms-sdc__copy{ width:auto; max-width:none; margin:0; padding:0; }
.lp-yellow .ms-sdc--hero.ye-founder .ms-sdc__copy > p{ font-size:18px; line-height:1.65; margin:0; }
.lp-yellow .ms-sdc--hero.ye-founder .ms-sdc__copy > p + p{ margin-top:18px; }
.ms-sdc--hero.ye-founder .ms-sdc__media{ width:auto; max-width:none; margin:0; overflow:visible; }
.ms-sdc--hero.ye-founder .ms-sdc__media picture{
  display:block; border-radius:26px; overflow:hidden; box-shadow:0 22px 56px rgba(18,52,48,.12);
}
.ms-sdc--hero.ye-founder .ms-sdc__media img{
  display:block; width:100%; height:auto !important; min-height:0 !important; aspect-ratio:4/4.6; object-fit:cover; object-position:50% 50%;
}
.ms-sdc--hero.ye-founder.media-card .ms-sdc__mcap{ padding:14px 0 0; }
.ms-sdc--hero.ye-founder.media-card .ms-sdc__mcap-n{ font-family:'Archivo'; font-weight:700; font-size:18px; line-height:1.6; color:#141414; }
.ms-sdc--hero.ye-founder.media-card .ms-sdc__mcap-r{ font-family:'Archivo'; font-size:15px; line-height:1.6; color:#1A1A1A; margin-top:0; }
@media (max-width:900px){
  .ms-sdc--hero.ye-founder .ms-sdc__inner{ grid-template-columns:minmax(0,1fr); }
  .ms-sdc--hero.ye-founder .ms-sdc__media img{ aspect-ratio:4/3.4; }
}
/* user request 2026-10-20: the "Du funktionierst" intro ("Von aussen sieht man …") = 20px on desktop (export .lead), 18 ≤640 */
.lp-yellow .ms-sdc--hero.rd-split.head-neg .ms-sdc__copy > h2 + p{ font-size:20px; }
@media (max-width:640px){ .lp-yellow .ms-sdc--hero.rd-split.head-neg .ms-sdc__copy > h2 + p{ font-size:18px; } }
/* ===== end STRESS-SELBSTTEST GELB (hero) ===== */

/* =====================================================================
   STRESS-SELBSTTEST ROT V5 (red-5 → /test/stress-selbsttest/red-5, landing_page,
   body `lp-yellow lp-red5`). Source resultat-chronischer-stress-red-20261020.html = the GELB
   export with red copy + the red accent (export --red #C8102E, red-bg #FDECEE). The page
   carries `lp-yellow`, so every GELB page rule applies; this layer only swaps the accent
   (same selectors as the GELB section, prefixed `.lp-red5`, placed after it → wins the tie).
   New: rd5-gauge (hero.twig branch, red defaults). Page rules for normal: normal.css.
   ===================================================================== */
.lp-red5 .ms-sdc--hero.rd-hero .ms-sdc__copy h1 em{ color:#C8102E; }
.ms-sdc__rdgauge.ms-sdc__yegauge.ms-sdc__rd5gauge .rdg-num{ fill:#C8102E; }
.ms-sdc__rdgauge.ms-sdc__yegauge.ms-sdc__rd5gauge .rdg-badge{ background:#FDECEE; color:#C8102E; }
.ms-sdc__rdgauge.ms-sdc__yegauge.ms-sdc__rd5gauge .rdg-scale > .on{ background:#FDECEE; color:#C8102E; }
.lp-red5 .ms-sdc.ms-sdc.rd-split:not(.rd-ok) .ms-sdc__copy > ul > li::before{ background:#C8102E; }
.lp-red5 .ms-sdc--hero.rd-split.head-neg .ms-sdc__copy > blockquote p{ color:#C8102E; }
.lp-red5 .ms-sdc--hero.zh-case .ms-sdc__copy > p > strong:first-child{ background:#FDECEE; color:#C8102E; }
.lp-red5 .ms-sdc--hero.zh-case .ms-sdc__copy > p:nth-of-type(2) > strong:first-child{ background:#E6F6EC; color:#2E8B57; }
.lp-red5 .ms-sdc.ms-sdc.zh-case .ms-sdc__copy > ul > li:nth-child(2)::before{ background:#C8102E; }
/* ===== end STRESS-SELBSTTEST ROT V5 (hero) ===== */

/* =====================================================================
   STRESSTEST LANDING PAGE (stpost → /lp/stress-selbsttest-post-v3, body.lp-stpost) —
   hero-layout flags sp-gets + sp-expert (both opted into the dispatcher hero link gate).
   Page resets + the normal-layout flags: normal.css (STRESSTEST LANDING PAGE section).
   ===================================================================== */
.lp-stpost .ms-sdc--hero .ms-sdc__copy{ text-align:left; }
.lp-stpost .ms-sdc--hero .ms-sdc__copy h2{ font-size:40px !important; line-height:1.14 !important; text-align:left !important; }
.lp-stpost .ms-sdc--hero .ms-sdc__copy h2 em{ font-style:normal; color:#007375; }
.lp-stpost .ms-sdc--hero .ms-sdc__copy p{ font-size:18px; line-height:1.6; color:#1A1A1A; margin:0; }
.lp-stpost .ms-sdc--hero .ms-sdc__media{ margin:0; }
.lp-stpost .ms-sdc--hero .ms-sdc__media picture{ display:block; }
.lp-stpost .ms-sdc--hero .ms-sdc__media img{ height:auto; min-height:0; }
@media (max-width:640px){ .lp-stpost .ms-sdc--hero .ms-sdc__copy h2{ font-size:28px !important; } }

/* ---------- sp-gets — "Das zeigt dir deine Auswertung" (export section.getsec). Body: <h2> ·
   <ul> ✓ list · <p> · <p> note (rendered BELOW the CTA). field_image = the rasterised phone
   mockup (transparent webp = the export .phwrap 540 + a 64px transparent margin all round, so the
   phone shadows fade out instead of being cut; pulled back with -64px margins). field_image_mobile
   = its ≤640 layout (the 390-viewport column, 350 wide) + the same 64px margin; mobile source ≤640 (hero.twig). The band OWNS padding 64/48 + the
   white→#EEF7F5 gradient (leave field_background_color EMPTY). 1-col ≤1020, visual on top. ---------- */
.lp-stpost .ms-sdc.ms-sdc.ms-sdc--hero.sp-gets{
  padding-top:64px !important; padding-bottom:64px !important;
  background:linear-gradient(180deg,#fff 0%,#EEF7F5 100%); overflow:hidden;
}
.lp-stpost .ms-sdc--hero.sp-gets .ms-sdc__inner{
  max-width:1044px; display:grid; grid-template-columns:minmax(0,1fr) 540px; gap:56px; align-items:center;
}
.lp-stpost .ms-sdc--hero.sp-gets .ms-sdc__copy{ display:flex; flex-direction:column; align-self:center; }
.lp-stpost .ms-sdc--hero.sp-gets .ms-sdc__copy > .ms-sdc__actions{ order:1; margin-top:28px !important; }   /* !important: an ancestor .no-margin zeroes it */
.lp-stpost .ms-sdc--hero.sp-gets .ms-sdc__copy > p:last-of-type{
  order:2; font-size:14.5px; line-height:1.6; margin-top:12px; color:#3D4B4A;
}
.lp-stpost .ms-sdc--hero.sp-gets .ms-sdc__copy > ul + p{ margin-top:22px; }
.lp-stpost .ms-sdc.ms-sdc.sp-gets .ms-sdc__copy > ul{ list-style:none; padding:0; margin:24px 0 0; }
.lp-stpost .ms-sdc.ms-sdc.sp-gets .ms-sdc__copy > ul > li{
  position:relative; padding:0 0 0 40px; margin:0 0 14px; line-height:1.6; color:#1A1A1A;
}
.lp-stpost .ms-sdc.ms-sdc.sp-gets .ms-sdc__copy > ul > li:last-child{ margin-bottom:0; }
.lp-stpost .ms-sdc.ms-sdc.sp-gets .ms-sdc__copy > ul > li::before{
  content:"✓"; position:absolute; left:0; top:1px; width:28px; height:28px; border-radius:50%;
  background:#007375; color:#fff; font-weight:700; font-size:15px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.lp-stpost .ms-sdc--hero.sp-gets .ms-sdc__media{ display:flex; justify-content:center; margin:-64px; }
.lp-stpost .ms-sdc--hero.sp-gets .ms-sdc__media picture{ width:668px; max-width:100%; }   /* 540 + 2×64 */
.lp-stpost .ms-sdc--hero.sp-gets .ms-sdc__media img{
  display:block; width:100%; height:auto; min-height:0; object-fit:contain; border-radius:0; box-shadow:none;
}
@media (max-width:1020px){
  .lp-stpost .ms-sdc--hero.sp-gets .ms-sdc__inner{ grid-template-columns:minmax(0,1fr); gap:36px; }
  .lp-stpost .ms-sdc--hero.sp-gets .ms-sdc__media{ order:-1; }
}
@media (max-width:640px){
  .lp-stpost .ms-sdc.ms-sdc.ms-sdc--hero.sp-gets{ padding-top:48px !important; padding-bottom:48px !important; }
  .lp-stpost .ms-sdc--hero.sp-gets .ms-sdc__media{ margin:-64px; }   /* raster = the 350 content column + 64px transparent margin all round */
  .lp-stpost .ms-sdc--hero.sp-gets .ms-sdc__media picture{ width:100%; max-width:478px; }   /* 350 + 2×64: the export's phones keep a fixed size above 390 */
}

/* ---------- sp-expert — Michaela (export .exp): photo LEFT (.8fr, radius 22, 4:4.6, focus 50% 20%)
   · copy RIGHT (1.2fr): <h2> (<em> teal) · <p> × 2 · CTA. 1-col ≤900 (photo on top, max 320, 1:1).
   Band OWNS padding 64/48; bg #efefef = field. ---------- */
.lp-stpost .ms-sdc.ms-sdc.ms-sdc--hero.sp-expert{ padding-top:64px !important; padding-bottom:64px !important; }
.lp-stpost .ms-sdc--hero.sp-expert .ms-sdc__inner{
  max-width:1044px; display:grid; grid-template-columns:.8fr 1.2fr; gap:56px; align-items:center;
}
.lp-stpost .ms-sdc--hero.sp-expert .ms-sdc__media{ order:-1; }
.lp-stpost .ms-sdc--hero.sp-expert .ms-sdc__media img{
  display:block; width:100%; height:auto; min-height:0; aspect-ratio:4/4.6; object-fit:cover; object-position:50% 20%;
  border-radius:22px; box-shadow:0 22px 56px rgba(18,52,48,.14);
}
.lp-stpost .ms-sdc--hero.sp-expert .ms-sdc__copy > p{ margin-top:16px; }
.lp-stpost .ms-sdc--hero.sp-expert .ms-sdc__copy > .ms-sdc__actions{ margin-top:28px !important; }
@media (max-width:900px){
  .lp-stpost .ms-sdc--hero.sp-expert .ms-sdc__inner{ grid-template-columns:minmax(0,1fr); gap:32px; }
  .lp-stpost .ms-sdc--hero.sp-expert .ms-sdc__media img{ max-width:320px; aspect-ratio:1/1; }
}
@media (max-width:640px){
  .lp-stpost .ms-sdc.ms-sdc.ms-sdc--hero.sp-expert{ padding-top:48px !important; padding-bottom:48px !important; }
}
/* ===== end STRESSTEST LANDING PAGE (hero) ===== */