/**
 * Headings
 * Source: Figma Design System — Headlines overview
 * Generated: 2026-03-10
 *
 * Scale: 1.2 (Minor Third 6/5)
 * Root font-size: 16px
 * Font: "Bosch Sans" Bold (700)
 *
 * Levels:
 *   .headline-xxl / xl / large  — hero / splash headings
 *   h1–h6        — semantic document headings
 */

/* -------------------------------------------------------
 * Shared heading base
 * ------------------------------------------------------- */

h1, h2, h3, h4, h5, h6,
.headline-xxl, .headline-xl, .headline-large {
  font-family: var(--font-family, "Bosch Sans", sans-serif);
  font-weight: var(--font-weight-bold, 700);
  font-style: normal;
  font-feature-settings: 'zero';
  color: var(--trust, #550a2d);
  margin-top: 0;
}


.heading {
  margin-block: var(--spacing-300) var(--spacing-500);

  & em, & strong {
    color: var(--trust, #550a2d);
  }

  /* Field for heading is a CKEditor, so everything inside is a paragraph */
  & > p {
    &:first-child {
      margin-top: 0;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }
}

/* -------------------------------------------------------
 * Headings on dark/trust surfaces
 * ------------------------------------------------------- */

.surface--trust {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .headline-xxl,
  .headline-xl,
  .headline-large {
    color: var(--ambience);

    .bosch-highlight {
      color: var(--trust);
    }
  }
}

/* -------------------------------------------------------
 * Headings on light surfaces (white, ambience, attitude, academy)
 * ------------------------------------------------------- */

.surface--white,
.surface--ambience,
.surface--ambience_light,
.surface--ambience_dark,
.surface--attitude,
.surface--academy {
  --container-heading-color: var(--trust);
  /*.bosch-highlight {
      color: var(--trust);
    }
  }*/
}

/* -------------------------------------------------------
 * large decorative headings
 * ------------------------------------------------------- */

.headline-xxl {
  font-size: var(--text-display-1, 7.5rem);
  line-height: 1.05;
  letter-spacing: -0.026em;   /* −2.6 % */
}

.headline-xl {
  font-size: var(--text-display-2, 5.75rem);
  line-height: 1.1;
  letter-spacing: -0.023em;   /* −2.3 % */
}

.headline-large {
  font-size: var(--text-display-3, 4.75rem);
  line-height: 1.1;
  letter-spacing: -0.023em;   /* −2.3 % */
}

/* -------------------------------------------------------
 * Semantic heading styles h1–h6
 * ------------------------------------------------------- */

/* H1 — 64 px / 4 rem */
h1 {
  font-size: var(--text-h1, 4rem);
  line-height: 1.1;
  letter-spacing: -0.022em;   /* −2.2 % */
}

/* H2 — 54 px / 3.375 rem */
h2 {
  font-size: var(--text-h2, 3.375rem);
  line-height: 1.2;
  letter-spacing: -0.021em;   /* −2.1 % */
  margin-bottom: var(--spacing-400, 32px);
}

/* H3 — 38 px / 2.375 rem */
h3 {
  font-size: var(--text-h3, 2.375rem);
  line-height: 1.2;
  letter-spacing: -0.0175em;  /* −1.75 % */
  margin-bottom: var(--spacing-300, 24px);
}

/* H4 — 32 px / 2 rem */
h4 {
  font-size: var(--text-h4, 2rem);
  line-height: 1.25;
  letter-spacing: -0.015em;   /* −1.5 % */
}

/* H5 — 26 px / 1.625 rem */
h5 {
  font-size: var(--text-h5, 1.625rem);
  line-height: 1.3;
  letter-spacing: -0.012em;   /* −1.2 % */
}

/* H6 — 22 px / 1.375 rem */
h6 {
  font-size: var(--text-h6, 1.375rem);
  line-height: 1.3;
  letter-spacing: -0.012em;   /* −1.2 % */
}