/* Atom „Button" – einzige Quelle für Buttons im Jobportal
   (docs/reconstruction/05_DESIGN_SYSTEM.md §2.3). Wird auf jeder Jobs-,
   Portal- und Admin-Seite direkt nach editorial.css geladen und ersetzt deren
   .ee-btn-Regeln (editorial.css bleibt www-Basis, D-001). Gilt in allen
   Scopes (.ee-front, .ee-portal-body, .adm-body) ohne Scope-Präfix.
   Bestandsklassen (.ee-btn-primary …) und Zielklassen (.ee-button--primary …)
   sind Aliasse derselben Regeln. Werte ausschließlich aus tokens.css. */

.ee-btn,
.ee-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ee-space-2);
  min-height: 44px;
  padding: 0.6rem var(--ee-space-component-md);
  font-family: var(--ee-font-sans);
  font-size: var(--ee-text-base);
  font-weight: 600;
  line-height: var(--ee-leading-tight);
  color: var(--ee-color-text-primary);
  background: var(--ee-color-surface-0);
  border: 1px solid transparent;
  border-radius: var(--ee-radius-control);
  box-shadow: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--ee-duration-fast) var(--ee-ease-standard),
    border-color var(--ee-duration-fast) var(--ee-ease-standard),
    color var(--ee-duration-fast) var(--ee-ease-standard);
}
.ee-btn:active,
.ee-button:active { transform: translateY(1px); }

/* Primär: genau eine Hauptaktion je Ansicht. Kontrast-Rot, kein Schatten. */
.ee-btn.ee-btn-primary,
.ee-button--primary {
  background: var(--ee-color-action-primary);
  border-color: var(--ee-color-action-primary);
  color: var(--ee-color-action-on-primary);
}
.ee-btn.ee-btn-primary:hover,
.ee-button--primary:hover {
  background: var(--ee-color-action-primary-hover);
  border-color: var(--ee-color-action-primary-hover);
  color: var(--ee-color-action-on-primary);
}
.ee-btn.ee-btn-primary:focus-visible,
.ee-button--primary:focus-visible {
  outline: 2px solid var(--ee-color-focus-inverse);
  outline-offset: -4px;
}

/* Sekundär: weiße Fläche mit Rahmen. */
.ee-btn.ee-btn-secondary,
.ee-button--secondary {
  background: var(--ee-color-surface-0);
  border-color: var(--ee-color-border-strong);
  color: var(--ee-color-text-primary);
}
.ee-btn.ee-btn-secondary:hover,
.ee-button--secondary:hover {
  background: var(--ee-color-surface-0);
  border-color: var(--ee-color-text-primary);
  color: var(--ee-color-text-primary);
}

/* Tertiär: Textaktion ohne Fläche, Mindesthöhe bleibt (Zielgröße). */
.ee-btn.ee-btn-tertiary,
.ee-button--tertiary {
  background: transparent;
  border-color: transparent;
  color: var(--ee-color-action-primary);
  font-weight: 500;
}
.ee-btn.ee-btn-tertiary:hover,
.ee-button--tertiary:hover {
  color: var(--ee-color-action-primary-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Destruktiv: Text und Rahmen in Statusrot, Fläche erst nach Bestätigung. */
.ee-btn.ee-btn-destructive,
.ee-button--destructive {
  background: var(--ee-color-surface-0);
  border-color: var(--ee-color-status-error);
  color: var(--ee-color-status-error);
}
.ee-btn.ee-btn-destructive:hover,
.ee-button--destructive:hover {
  background: var(--ee-color-status-error);
  border-color: var(--ee-color-status-error);
  color: var(--ee-color-text-inverse);
}

/* Größen: md 44 px (Standard), lg 48 px (Primär-CTA mobil, Suche), sm 36 px (Tabellenzeilen). */
.ee-btn--lg,
.ee-button--lg { min-height: 48px; padding: 0.7rem var(--ee-space-component-lg); }
.ee-btn--sm,
.ee-button--sm { min-height: 36px; padding: 0.35rem var(--ee-space-component-sm); font-size: var(--ee-text-sm); }
.ee-btn--block,
.ee-button--block { display: flex; width: 100%; }

/* Zustände */
.ee-btn[disabled],
.ee-btn[aria-disabled="true"],
.ee-button[disabled],
.ee-button[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
.ee-btn[aria-busy="true"],
.ee-button[aria-busy="true"] {
  pointer-events: none;
  opacity: 0.8;
}
.ee-btn svg,
.ee-button svg { width: 20px; height: 20px; flex-shrink: 0; }