.btnElement {
  display: flex;
  margin-top: 1.5rem;
}
.btnElement.center {
  justify-content: center;
}
.btnElement.right {
  justify-content: end;
}
.btnElement .btn {
  display: flex;
  padding: 5px 20px;
  font-size: 14px;
  /*display: table;*/
  font-weight: 300;
  font-style: normal;
  text-decoration: none;
  -webkit-box-shadow: 1px 2px 5px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 1px 2px 5px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 1px 2px 5px 0px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
  z-index: 1;
  border: 1px solid transparent;
  text-transform: uppercase;
  --border-color: #7bb82d;
  --color: #ffffff;
  --background: #7bb82d;
  --primary: #7bb82d;
  --darkGreen: #2faaa3;
  --blue: #61b1ff;
  --orange: #feac17;
  --purple: #af5eaf;
  --red: #fd5b3e;
  --white: #ffffff;
  --transparent: transparent;
}
.btnElement .btn:after {
  background: #fff;
  content: "";
  height: 155px;
  left: -75px;
  opacity: .2;
  position: absolute;
  top: -50px;
  transform: rotate(35deg);
  transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
  width: 50px;
  z-index: 2;
}
.btnElement .btn:hover:after {
  left: 120%;
  transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
}
.btnElement .btn.bg-primary {
  --border-color: var(--primary);
  --background: var(--primary);
  --color: #ffffff;
}
.btnElement .btn.bg-primary.inverted {
  --background: var(--transparent);
  --color: var(--primary);
  --border-color: var(--primary);
}
.btnElement .btn.bg-primary,
.btnElement .btn.bg-primary.inverted {
  border-color: var(--border-color);
  color: var(--color);
  background-color: var(--background);
}
.btnElement .btn.bg-allergien {
  --border-color: var(--darkGreen);
  --background: var(--darkGreen);
  --color: #ffffff;
}
.btnElement .btn.bg-allergien.inverted {
  --background: var(--transparent);
  --color: var(--darkGreen);
  --border-color: var(--darkGreen);
}
.btnElement .btn.bg-allergien,
.btnElement .btn.bg-allergien.inverted {
  border-color: var(--border-color);
  color: var(--color);
  background-color: var(--background);
}
.btnElement .btn.bg-atemwege {
  --border-color: var(--blue);
  --background: var(--blue);
  --color: #ffffff;
}
.btnElement .btn.bg-atemwege.inverted {
  --background: var(--transparent);
  --color: var(--blue);
  --border-color: var(--blue);
}
.btnElement .btn.bg-atemwege,
.btnElement .btn.bg-atemwege.inverted {
  border-color: var(--border-color);
  color: var(--color);
  background-color: var(--background);
}
.btnElement .btn.bg-ernaehrung {
  --border-color: var(--orange);
  --background: var(--orange);
  --color: #ffffff;
}
.btnElement .btn.bg-ernaehrung.inverted {
  --background: var(--transparent);
  --color: var(--orange);
  --border-color: var(--orange);
}
.btnElement .btn.bg-ernaehrung,
.btnElement .btn.bg-ernaehrung.inverted {
  border-color: var(--border-color);
  color: var(--color);
  background-color: var(--background);
}
.btnElement .btn.bg-haut {
  --border-color: var(--purple);
  --background: var(--purple);
  --color: #ffffff;
}
.btnElement .btn.bg-haut.inverted {
  --background: var(--transparent);
  --color: var(--purple);
  --border-color: var(--purple);
}
.btnElement .btn.bg-haut,
.btnElement .btn.bg-haut.inverted {
  border-color: var(--border-color);
  color: var(--color);
  background-color: var(--background);
}
.btnElement .btn.bg-anaphylaxie {
  --border-color: var(--red);
  --background: var(--red);
  --color: #ffffff;
}
.btnElement .btn.bg-anaphylaxie.inverted {
  --background: var(--transparent);
  --color: var(--red);
  --border-color: var(--red);
}
.btnElement .btn.bg-anaphylaxie,
.btnElement .btn.bg-anaphylaxie.inverted {
  border-color: var(--border-color);
  color: var(--color);
  background-color: var(--background);
}
.btnElement .btn.width-half {
  flex: 0 1 50%;
  min-width: fit-content;
  box-sizing: border-box;
}
.btnElement .btn.width-full {
  width: 100%;
  min-width: fit-content;
  box-sizing: border-box;
}
.btnElement .btn.text-center {
  justify-content: center;
}
.btnElement .btn.text-right {
  justify-content: end;
}
.btnElement .btn.height-2l {
  min-height: 3rem;
  align-items: center;
}
.btnElement .btn.height-3l {
  min-height: 4.5rem;
  align-items: center;
}
.btnElement .btn.height-4l {
  min-height: 6rem;
  align-items: center;
}
.btnElement .btn > span {
  display: inline-block;
}
.btnElement .btn .text.text-oneandahalf {
  font-size: 1.5em;
}
.btnElement .btn .text.text-double {
  font-size: 2em;
}
.btnElement .btn .text.text-tripple {
  font-size: 3em;
}
.btnElement .btn .text.text-bold {
  font-weight: bold;
}