/* ==========================================================================
   transformis® · Button Component
   --------------------------------------------------------------------------
   Verwendung:  <a class="tm-btn" href="...">LABEL</a>
   Varianten:   .tm-btn--outline, .tm-btn--sm
   ========================================================================== */

.tm-btn {
  display: inline-block;
  padding: 12px 17px;
  background: var(--tm-orange);
  color: var(--tm-white);
  text-decoration: none;
  text-transform: uppercase;
  font-family: var(--tm-font-heading);
  font-weight: var(--tm-fw-bold);
  font-size: 18px;
  line-height: 24px;
  border: 2px solid var(--tm-orange);
  cursor: pointer;
  transition: background var(--tm-transition), color var(--tm-transition);
}

.tm-btn:hover,
.tm-btn:focus {
  background: transparent;
  color: var(--tm-orange);
  text-decoration: none;
}

.tm-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ── Outline Variant ── */
.tm-btn--outline {
  background: transparent;
  color: var(--tm-orange);
}

.tm-btn--outline:hover,
.tm-btn--outline:focus {
  background: var(--tm-orange);
  color: var(--tm-white);
}

/* ── Small Variant (Cards, Slider) ── */
.tm-btn--sm {
  padding: 8px 16px;
  font-size: 14px;
  line-height: 20px;
}

/* ── Button auf dunklem Hintergrund ── */
.tm-btn--on-dark:focus-visible {
  outline-color: var(--tm-white);
}