/* ============================================================
   Datei:        assets/css/shared/button.css
   Seite:        alle Seiten
   Zweck:        Buttons (Links und Knöpfe) in zwei Varianten und zwei Größen
   Abhängig von: assets/css/shared/variablen.css
   Genutzt von:  Startseite (Hero), Projektkarte, Detailseite, 404
   ============================================================ */

/* --- 1. Grundform --- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-2);
  min-height: 2.75rem;
  padding: var(--abstand-2) var(--abstand-4);
  border: 1px solid transparent;
  border-radius: var(--radius-rund);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dauer-kurz) var(--ease), background var(--dauer-kurz),
    border-color var(--dauer-kurz), box-shadow var(--dauer-mittel);
}

.button:hover {
  transform: translateY(-2px);
}

/* --- 2. Varianten --- */
.button--primaer {
  background: var(--farbe-wein);
  color: var(--farbe-text-auf-wein);
}

.button--primaer:hover {
  color: var(--farbe-text-auf-wein);
  box-shadow: 0 8px 28px -8px color-mix(in srgb, var(--farbe-wein) 90%, transparent);
}

.button--sekundaer {
  background: transparent;
  border-color: var(--farbe-rahmen);
  color: var(--farbe-text);
}

.button--sekundaer:hover {
  border-color: var(--akzent-1);
  background: color-mix(in srgb, var(--akzent-1) 10%, transparent);
}

/* --- 3. Größe --- */
.button--klein {
  min-height: 2.5rem;
  padding: var(--abstand-1) var(--abstand-3);
  font-size: var(--schrift-klein);
}