@media screen, projection {
  /**
     *  Buttons in einheitlichem Stil
     *
     *  Lotsen- und Call-To-Action-Links im Button Stil und eigenen Farben
     *
     *  @markup:
     *
     *  @shortcode:
        [c-button style="" target="" title="" text="" icon=""]
     *
     *
     **/
  .c-button {
    border: 0px solid var(--grau1);
    border-radius: var(--border-radius);
    background: var(--grau3);
    transition: all 0.6s ease-out;
    margin-bottom: var(--margin);
    min-height: 4rem;
  }
  .c-button:hover {
    background: var(--grau5);
  }
  .c-button--lotse {
    background-color: var(--orange);
    border-color: var(--orange);
    border-radius: var(--border-radius);
  }
  .c-button--lotse:hover {
    background-color: var(--orange2);
    border-color: var(--orange2);
  }
  .c-button--cta {
    background-color: var(--gruen);
    border-color: var(--gruen);
    border-radius: var(--border-radius);
  }
  .c-button--cta:hover {
    background-color: var(--gruen2);
    border-color: var(--gruen2);
  }
  .c-button__link {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-decoration: none;
    color: var(--weiss);
  }
  .c-button__link div:first-child {
    flex-grow: 0;
    padding-left: 1.5em;
    padding-right: 0.5em;
    border-right-width: 2px;
    border-right-color: var(--weiss);
    border-right-style: solid;
    height: 4em;
    align-self: center;
  }
  .c-button__link div:last-child {
    margin-top: 0;
    flex-grow: 999;
    padding: 0 calc(var(--padding) / 2);
    align-self: center;
    max-height: 4em;
  }
  .c-button__link svg {
    width: 1.5em;
    height: 1.5em;
    margin-bottom: -1.75em;
  }
  .c-button__link:hover {
    color: var(--grau);
    text-decoration: none;
    transition: all 0.6s ease-out;
  }
  .c-button__link--lotse {
    color: var(--weiss);
    font-weight: 700;
  }
  .c-button__link--cta {
    color: var(--grau);
    font-weight: 700;
  }
}