/* ============================================================
   BUTTONS
   Base-Klasse .button + Groessen- und Stil-Modifier.
   Groesse: .button-size-small / .button (default: medium) / .button-size-large
   Stil:    .button-style-black / -gray / -white / -outline
   ============================================================ */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--space-6);
  padding: 0 var(--space-5);
  border: 1.5px solid transparent;
  border-radius: 9999px;
  font-size: var(--font-size-2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-3);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

/* Groesse: Klein */
.button.button-size-small {
  min-height: var(--space-4);
  padding: 0 var(--space-3);
  font-size: var(--font-size-1);
  line-height: var(--line-height-2);
}

/* Groesse: Gross */
.button.button-size-large {
  min-height: var(--space-8);
  padding: 0 var(--space-7);
  font-size: var(--font-size-4);
  line-height: var(--line-height-4);
}

/* Stil: Black – primaere Aktion, hoechste Dringlichkeit */
.button-style-black {
  color: var(--color-paper);
  background: var(--color-ink);
  border-color: var(--color-ink);
}

.button-style-black:hover {
  color: var(--color-paper);
  background: #2d3748;
  border-color: #2d3748;
}

/* Stil: Gray – sekundaere Aktion, zurueckhaltend */
.button-style-gray {
  color: var(--color-ink);
  background: rgba(17, 24, 39, 0.08);
  border-color: transparent;
}

.button-style-gray:hover {
  color: var(--color-ink);
  background: rgba(17, 24, 39, 0.14);
}

/* Stil: White – fuer dunkle oder farbige Flaechen */
.button-style-white {
  color: var(--color-ink);
  background: var(--color-paper);
  border-color: var(--color-line);
}

.button-style-white:hover {
  color: var(--color-ink);
  background: var(--color-cloud);
}

/* Stil: Outline – dezent, fuer niedrige visuelle Gewichtung */
.button-style-outline {
  color: var(--color-ink);
  background: transparent;
  border-color: var(--color-ink);
}

.button-style-outline:hover {
  color: var(--color-ink);
  background: rgba(17, 24, 39, 0.06);
}

/* Stil: Outline White – fuer dunkle oder farbige Flaechen */
.button-style-outline-white {
  color: var(--color-paper);
  background: transparent;
  border-color: var(--color-paper);
}

.button-style-outline-white:hover {
  color: var(--color-paper);
  background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 660px) {
  .button {
    width: 100%;
  }
}