/* ============================================
   BUTTONS - Zentrale Definitionen
   ============================================ */

.btn,
button,
input[type="button"],
input[type="submit"],
a[class*="btn"] {
  display: inline-block;
  font-family: var(--typography-eb74b8f-font-family);
  font-size: var(--typography-eb74b8f-font-size);
  font-weight: var(--typography-eb74b8f-font-weight);
  line-height: var(--typography-eb74b8f-line-height);
  letter-spacing: var(--typography-eb74b8f-letter-spacing);
  word-spacing: var(--typography-eb74b8f-word-spacing);
  border-radius: var(--border-radius-lg);
  padding: 16px 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  text-align: center;
  border: none;
}

.btn,
button,
input[type="button"],
input[type="submit"] {
  color: var(--color-white);
  background-color: var(--color-primary);
  box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.3);
}

.btn:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
  color: var(--color-light);
  background-color: var(--color-accent);
  box-shadow: none;
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn-primary:hover {
  background-color: var(--color-accent);
  color: var(--color-white);
}

.btn-outline-white {
  background: transparent;
  color: var(--color-white);
  border: 2px solid var(--color-white) !important;
  padding: 14px 50px;
  box-shadow: none;
}

.btn-outline-white:hover {
  background-color: var(--color-white);
  color: var(--color-primary);
}

.btn-white {
  background-color: var(--color-white);
  color: var(--color-primary);
  border: 2px solid var(--color-white);
}

.btn-white:hover {
  background-color: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
}

.btn-sm {
  padding: 10px 30px;
  font-size: 14px;
}

.btn-lg {
  padding: 20px 60px;
  font-size: 22px;
}

.btn-block {
  display: block;
  width: 100%;
}