/* ===============================================
 * Farben werden in :root der basis.css definiert
 * =============================================== */
button {
  padding: 0;
  border: 0;
  border-radius: 0;
  text-transform: none;
  transition: none;
}

.btn {
  --btn-display: inline-block;
  --btn-font-family: var(--body-font-family);
  --btn-font-size: var(--body-font-size);
  --btn-font-weight: var(--body-font-weight);
  --btn-line-height: var(--body-line-height);
  --btn-text-align: center;
  --btn-text-vertical-align: middle;
  --btn-text-decoration: none;
  --btn-text-color: var(--body-font-color);
  --btn-cursor: pointer;
  --btn-border-style: var(--border-style);
  --btn-border-width: var(--border-width);
  --btn-border-color: transparent;
  --btn-border-radius: 5px;
  --btn-bg-color: var(--gray-2);
  --btn-margin-x: 0.5rem;
  --btn-padding-x: 0.75rem;
  --btn-padding-y: 0.375rem;
  --btn-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	 --btn-trust-bg: var(--blue-2);
	 --btn-trust-bg-hover: var(--blue-hex);
	 --btn-hinweis-bg: var(--yellow-2);
	 --btn-hinweis-bg-hover: var(--yellow-hex);
  display: var(--btn-display);
  font-family: var(--btn-font-family);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  line-height: var(--btn-line-height);
  text-align: var(--btn-text-align);
  vertical-align: var(--btn-vertical-align);
  text-decoration: var(--btn-text-decoration);
  color: var(--btn-text-color);
  cursor: var(--btn-cursor);
  border-style: var(--btn-border-style);
  border-width: var(--btn-border-width);
  border-color: var(--btn-border-color);
  border-radius: var(--btn-border-radius);
  background-color: var(--btn-bg-color);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  transition: var(--btn-transition);
}
.btn:hover {
	background-color: var(--gray-4);
}

/* ============================================== */

.btn-group {
  display: inline-flex;
  overflow: hidden;
}

.btn-group .btn {
  border-color: var(--btn-border-color);
  border-radius: 0;
  margin-right: 0;
}

.btn-group .btn:not(:first-child) {
  border-radius: 0;
  margin-right: 0;
  margin-left: -1px;
}

.btn-group .btn:first-child {
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
}

.btn-group .btn:last-child {
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
}

.btn-group .btn + .btn {
  margin-left: -1px;
}

.btn.btn-alert {
  border-color: var(--rot-hex);
  background-color: var(--rot-2);
}

.btn.btn-alert:hover {
  color: var(--weiss-hex);
  background-color: var(--rot-3);
}

.btn.btn-trust {
  color: inherit;
  border-color: var(--blue-hex);
  background-color: var(--blue-2);
}

.btn.btn-trust:hover {
  color: var(--weiss-hex);
  border-color: var(--blue-hex);
  background-color: var(--blue-4);
}

.btn.btn-info, .btn.btn-hinweis {
  color: inherit;
  border-color: var(--yellow-hex);
  background-color: var(--yellow-2);
}

.btn.btn-info:hover, .btn.btn-hinweis:hover {
  color: inherit;
  border-color: var(--yellow-hex);
  background-color: var(--yellow-hex);
}

.btn.btn-tipp {
  color: inherit;
  border-color: var(--teal-hex);
  background-color: var(--teal-2);
}

.btn.btn-tipp:hover {
  color: var(--weiss-hex);
  border-color: var(--teal-hex);
  background-color: var(--teal-hex);
}

/* Disabled Button für JS validierbare Formulare */
.btn.btn:disabled {
  --btn-bg-color: var(--gray-1);
  --btn-text-color: var(--gray-5);
  --btn-cursor: not-allowed;
}