/* ==========================================================================
   transformis® · Button Component (Rebranding 2026)
   --------------------------------------------------------------------------
   Verwendung:  <a class="tm-btn" href="...">LABEL</a>
   Varianten:   .tm-btn--outline, .tm-btn--sm, .tm-btn--on-green, .tm-btn--on-blue
   Kontexte:    Hell (Standard) | Gruen (.tm-btn--on-green) | Blau (.tm-btn--on-blue)
   ========================================================================== */


/* ==========================================================================
   A. FILLED BUTTON (Standard – heller Hintergrund)
   ========================================================================== */

.tm-btn {
  display: inline-block;
  padding: 12px 17px;
  background: var(--tm-green);
  color: var(--tm-blue);
  text-decoration: none;
  text-transform: none !important; /* The7-Parent-Theme-Override verhindern */
  font-family: var(--tm-font-body);
  font-weight: var(--tm-fw-bold);
  font-size: 18px;
  line-height: 1.6;
  border: 1px solid var(--tm-green);
  cursor: pointer;
  transition: background var(--tm-transition),
              color var(--tm-transition),
              border-color var(--tm-transition);
}

/* Hover: 10 % dunkler Overlay */
.tm-btn:hover {
  background: color-mix(in srgb, var(--tm-green), black 10%);
  border-color: color-mix(in srgb, var(--tm-green), black 10%);
  color: var(--tm-blue);
  text-decoration: none;
}

/* Active: 10 % dunkler Overlay (gleich wie Hover) */
.tm-btn:active {
  background: color-mix(in srgb, var(--tm-green), black 10%);
  border-color: color-mix(in srgb, var(--tm-green), black 10%);
  color: var(--tm-blue);
}

/* Focus: Default-Look + blauer Ring */
.tm-btn:focus-visible {
  outline: 2px solid var(--tm-blue);
  outline-offset: 2px;
}

/* Disabled */
.tm-btn[disabled],
.tm-btn--disabled {
  background: var(--tm-disabled-bg);
  border-color: var(--tm-disabled-bg);
  color: var(--tm-disabled-text);
  pointer-events: none;
  cursor: default;
}


/* ==========================================================================
   B. OUTLINE BUTTON (heller Hintergrund)
   ========================================================================== */

.tm-btn--outline {
  background: transparent;
  color: var(--tm-blue);
  border-color: var(--tm-blue);
}

/* Hover: fuellt sich gruen */
.tm-btn--outline:hover {
  background: var(--tm-green);
  border-color: var(--tm-green);
  color: var(--tm-blue);
}

/* Active: bleibt gruen gefuellt */
.tm-btn--outline:active {
  background: var(--tm-green);
  border-color: var(--tm-green);
  color: var(--tm-blue);
}

/* Focus: Default-Look + blauer Ring */
.tm-btn--outline:focus-visible {
  outline: 2px solid var(--tm-blue);
  outline-offset: 2px;
}

/* Disabled */
.tm-btn--outline[disabled],
.tm-btn--outline.tm-btn--disabled {
  background: transparent;
  border-color: var(--tm-disabled-text);
  color: var(--tm-disabled-text);
}


/* ==========================================================================
   C. FILLED BUTTON auf gruenem Hintergrund (.tm-btn--on-green)
   ========================================================================== */

.tm-btn--on-green {
  background: var(--tm-blue);
  border-color: var(--tm-blue);
  color: var(--tm-white-soft);
}

/* Hover: leicht aufgehelltes Blau */
.tm-btn--on-green:hover {
  background: var(--tm-blue-600);
  border-color: var(--tm-blue-600);
  color: var(--tm-white-soft);
}

/* Active */
.tm-btn--on-green:active {
  background: var(--tm-blue-600);
  border-color: var(--tm-blue-600);
  color: var(--tm-white-soft);
}

/* Focus: Default-Look + blauer Ring */
.tm-btn--on-green:focus-visible {
  outline: 2px solid var(--tm-blue);
  outline-offset: 2px;
}

/* Disabled */
.tm-btn--on-green[disabled],
.tm-btn--on-green.tm-btn--disabled {
  background: var(--tm-disabled-bg);
  border-color: var(--tm-disabled-bg);
  color: var(--tm-disabled-text);
}


/* ==========================================================================
   D. OUTLINE BUTTON auf gruenem Hintergrund (.tm-btn--on-green.tm-btn--outline)
   ========================================================================== */

.tm-btn--on-green.tm-btn--outline {
  background: transparent;
  border-color: var(--tm-blue);
  color: var(--tm-blue);
}

/* Hover: fuellt sich dunkelblau, Text gruen */
.tm-btn--on-green.tm-btn--outline:hover {
  background: var(--tm-blue);
  border-color: var(--tm-blue);
  color: var(--tm-green);
}

/* Active */
.tm-btn--on-green.tm-btn--outline:active {
  background: var(--tm-blue);
  border-color: var(--tm-blue);
  color: var(--tm-green);
}

/* Focus */
.tm-btn--on-green.tm-btn--outline:focus-visible {
  outline: 2px solid var(--tm-blue);
  outline-offset: 2px;
}

/* Disabled */
.tm-btn--on-green.tm-btn--outline[disabled],
.tm-btn--on-green.tm-btn--outline.tm-btn--disabled {
  background: transparent;
  border-color: var(--tm-disabled-text);
  color: var(--tm-disabled-text);
}


/* ==========================================================================
   E. OUTLINE BUTTON auf blauem Hintergrund (.tm-btn--on-blue.tm-btn--outline)
   ========================================================================== */

.tm-btn--on-blue.tm-btn--outline {
  background: transparent;
  border-color: var(--tm-white-soft);
  color: var(--tm-white-soft);
}

/* Hover: füllt sich weiss, Text blau */
.tm-btn--on-blue.tm-btn--outline:hover {
  background: var(--tm-white-soft);
  border-color: var(--tm-white-soft);
  color: var(--tm-blue);
}

/* Active */
.tm-btn--on-blue.tm-btn--outline:active {
  background: var(--tm-white-soft);
  border-color: var(--tm-white-soft);
  color: var(--tm-blue);
}

/* Focus */
.tm-btn--on-blue.tm-btn--outline:focus-visible {
  outline: 2px solid var(--tm-green);
  outline-offset: 2px;
}


/* ==========================================================================
   F. SMALL VARIANT (kompakteres Padding, gleiche Schrift)
   ========================================================================== */

.tm-btn--sm {
  padding: 8px 16px;
}