:root {
  --h1-font-size: 2.8rem;
  --h1-line-height: 2.8rem;
  --h1-letter-spacing: 0.1em;
  --h1-font-weight: 700;
  --h1-text-align: center;
  --h1-color: #132943;
  --h1-margin-bottom: 1rem;

  --h2-margin-bottom: 1rem;
  --h2-font-size: 2rem;
  --h2-line-height: 2.4rem;
  --h2-letter-spacing: 0.02em;
  --h2-font-weight: 700;
  --h2-color: #132943;

  --h3-margin-bottom: 0.6rem;
  --h3-font-size: 1.8rem;
  --h3-line-height: 2.2rem;
  --h3-letter-spacing: 0.02em;
  --h3-font-weight: 700;
  --h3-color: #132943;

  --h4-margin-bottom: 0.6rem;
  --h4-font-size: 1.8rem;
  --h4-line-height: 2.6rem;
  --h4-letter-spacing: 0.02em;
  --h4-font-weight: 400;
  --h4-color: #132943;
}

@media screen and (min-width: 810px) {
  :root {
      --h1-font-size: 3.8rem;
      --h1-line-height: 3.8rem;
      --h1-letter-spacing: 0.1em;
      --h1-font-weight: 700;
      --h1-text-align: center;
      --h1-color: #132943;
      --h1-margin-bottom: 1rem;
  
      --h2-margin-bottom: 1rem;
      --h2-font-size: 2.6rem;
      --h2-line-height: 3.1rem;
      --h2-letter-spacing: 0.02em;
      --h2-font-weight: 700;
      --h2-color: #132943;
  
      --h3-margin-bottom: 0.6rem;
      --h3-font-size: 2.2rem;
      --h3-line-height: 2.6rem;
      --h3-letter-spacing: 0.02em;
      --h3-font-weight: 700;
      --h3-color: #132943;

      --h4-margin-bottom: 0.6rem;
      --h4-font-size: 2rem;
      --h4-line-height: 2.6rem;
      --h4-letter-spacing: 0.02em;
      --h4-font-weight: 400;
      --h4-color: #132943;
    }
}


  div.heading-section {
    padding-top: 1rem;
    padding-bottom: 0.4rem;
  }
  /*TODO: in Variablen*/
  .heading-section .heading-label,
  .heading-section .subheading {
    text-align: center;
  }

  .heading-section .subheading {
    max-width: 870px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .heading-section {
    padding-top: 5rem;
    padding-bottom: 3rem;
  }