/* Section/row title weight system (bold + light mix). */

/*
 * One rule for every section and page title (reference: the homepage
 * "Prächtige Luster, stylische Leuchten, Extravagante Lampen"):
 *
 *   - plain text ............ Manrope 600, upright
 *   - emphasised part ....... Manrope 300, italic
 *     (<em>, <i>, .italic-section-title*, .aboutus-info-span, and the
 *     stand-alone second-line headings .section-italic-title*,
 *     .innovation-italic-title)
 *   - <strong>/<b> .......... back to 600 upright, also inside an emphasis
 *
 * Both parts keep the title's size and use letter-spacing -0.02em.
 *
 * The Webflow and design-system rules these replace use !important on
 * selectors up to (0,3,1) (`body:has(.section-startseite…) .aboutus-info-span`),
 * so every rule here is anchored on `:root:not(#mpw-titles) body`, which adds
 * one ID's worth of specificity and wins regardless of file order.
 *
 * Out of scope on purpose: the homepage hero (.banner-title), eyebrows, card
 * titles (.service-title, .team-name, .heading-7 …), FAQ questions, footer,
 * nav, and the career pages (.mpw-jobs-*), which are styled separately.
 */

:root {
  --mpw-title-weight: 600;
  --mpw-title-light: 300;
  --mpw-title-tracking: -0.02em;
}

/* Title containers: plain text is semibold and upright. */
:root:not(#mpw-titles) body :is(
  .section-title,
  .section-title-2,
  .section-title-blog,
  .section-title-left,
  .section-title-left-copy,
  .section-title-left-copy-copy,
  .section-title-right,
  .aboutus-info-title,
  .aboutus-info-title-copy,
  .aboutus-info-title-copy-copy,
  .b2b-info-title,
  .b2c-info-title,
  .image-text,
  .innovation-title,
  h1.subheading,
  h2.subheading,
  .contact-form-title,
  .contact-form-title-two,
  .mpw-reviews__title,
  .breadcrumb-title,
  .breadcrumb-title-partner,
  h1.heading-13,
  h1.heading-14,
  h1.heading-15,
  .mpw-brand__title,
  .mpw-brand__section > h2,
  .mpw-brand__cta h2
) {
  font-family: Manrope, sans-serif;
  font-weight: var(--mpw-title-weight) !important;
  font-style: normal !important;
  letter-spacing: var(--mpw-title-tracking) !important;
}

/* Stand-alone second-line headings ("Gewerbehof" / "Höfer"): light italic. */
:root:not(#mpw-titles) body :is(
  .section-italic-title,
  .section-italic-title-copy,
  .innovation-italic-title,
  h1.italic-section-title-copy
) {
  font-family: Manrope, sans-serif;
  font-weight: var(--mpw-title-light) !important;
  font-style: italic !important;
  letter-spacing: var(--mpw-title-tracking) !important;
}

/* Inline emphasis inside a title: light italic at the title's size. */
:root:not(#mpw-titles) body :is(
  .section-title,
  .section-title-2,
  .section-title-blog,
  .section-title-left,
  .section-title-left-copy,
  .section-title-left-copy-copy,
  .section-title-right,
  .aboutus-info-title,
  .aboutus-info-title-copy,
  .aboutus-info-title-copy-copy,
  .b2b-info-title,
  .b2c-info-title,
  .image-text,
  .innovation-title,
  h1.subheading,
  h2.subheading,
  .contact-form-title,
  .contact-form-title-two,
  .mpw-reviews__title,
  .breadcrumb-title,
  .breadcrumb-title-partner,
  h1.heading-13,
  h1.heading-14,
  h1.heading-15,
  .mpw-brand__title,
  .mpw-brand__section > h2,
  .mpw-brand__cta h2
) :is(em, i, .italic-section-title, .italic-section-title-copy, .italic-section-title-copy-copy, .aboutus-info-span) {
  display: inline !important;
  /* same ink as the title (the homepage intro greyed its <em>) */
  color: inherit !important;
  /* the slanted last letter otherwise touches the following word */
  padding-right: 0.06em;
  font-family: inherit;
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: var(--mpw-title-light) !important;
  font-style: italic !important;
  letter-spacing: inherit !important;
}

/* <strong>/<b> inside any title part is the semibold part again
   (the reference's "Extravagante" sits inside the light span). */
:root:not(#mpw-titles) body :is(
  .section-title,
  .section-title-2,
  .section-title-blog,
  .section-title-left,
  .section-title-left-copy,
  .section-title-left-copy-copy,
  .section-title-right,
  .aboutus-info-title,
  .aboutus-info-title-copy,
  .aboutus-info-title-copy-copy,
  .b2b-info-title,
  .b2c-info-title,
  .image-text,
  .innovation-title,
  h1.subheading,
  h2.subheading,
  .contact-form-title,
  .contact-form-title-two,
  .mpw-reviews__title,
  .breadcrumb-title,
  .breadcrumb-title-partner,
  h1.heading-13,
  h1.heading-14,
  h1.heading-15,
  .section-italic-title,
  .section-italic-title-copy,
  .innovation-italic-title,
  h1.italic-section-title-copy,
  .mpw-brand__title,
  .mpw-brand__section > h2,
  .mpw-brand__cta h2
) :is(strong, b) {
  font-family: inherit;
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: var(--mpw-title-weight) !important;
  font-style: normal !important;
  letter-spacing: inherit !important;
}

/* ------------------------------------------------------------------------ */
/* Sizes: both halves of a title share one size                              */
/* ------------------------------------------------------------------------ */

/* The second line of a split title was pinned to 40px under a 60px first
   line (B2B/B2C hero, about-us, Gewerbehof, Konfektionierung …). */
:root:not(#mpw-titles) body :is(.section-title, .b2b-info-title, .b2c-info-title) + .section-italic-title,
:root:not(#mpw-titles) body :is(.b2b-info-title, .b2c-info-title) + .section-title-block + .section-italic-title {
  font-size: var(--mpw-page-title) !important;
  line-height: 1.1 !important;
  margin-top: 0 !important;
}

/* Lichtberechnung: "Moderne Software" (40px) over a 16px italic line. */
:root:not(#mpw-titles) body h1.heading-13,
:root:not(#mpw-titles) body h1.heading-13 + h1.italic-section-title-copy {
  font-size: clamp(1.75rem, 3vw, 2.5rem) !important;
  line-height: 1.2 !important;
}

/* A design-system list meant for <strong> children also set
   `font-size: inherit` on .section-title-left and the regional page
   headings themselves, so they rendered at body size (16px). */
:root:not(#mpw-titles) body .section-title-left,
:root:not(#mpw-titles) body .mpw-local__section h2.subheading,
:root:not(#mpw-titles) body .faq h2.subheading {
  font-size: var(--mpw-title) !important;
  line-height: 1.15 !important;
}

:root:not(#mpw-titles) body .inner-section-title .section-title-left {
  font-size: var(--mpw-page-title) !important;
  line-height: 1.1 !important;
}