/* fk-buchen.css — Kompakter Primary-Button (app-weites Button-System).
 *
 * SSOT fuer die `.fk-buchen`-Familie. Frueher lag sie in der Section-Datei
 * mt-focus-cards.css, obwohl sie app-weit konsumiert wird (Mein Tag, Admin,
 * Gast, Abrechnung, Mein-Bereich-Benachrichtigungen). Hier im Components-Layer
 * (nach base.css, VOR sections/*), damit section-spezifische Ergaenzungen —
 * z.B. admin.css `.fk-buchen--danger`-Hover/Disabled — weiterhin gewinnen.
 *
 * Shared base (font-family/cursor/transition/focus-visible) kommt aus dem
 * Multi-Selektor-Block in base.css (`.fk-buchen, .fk-d365, …`).
 * Unterschiede zu .btn .btn-primary: kleineres padding, font-size-sm, gap 6px.
 */

.fk-buchen {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1-5) var(--space-4);
  background: var(--brand-default);
  color: var(--brand-text-on);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.fk-buchen:hover { background: var(--brand-hover); }

/* Cancel-Variante: gleiche Groesse wie .fk-buchen, sekundaere Farben */
.fk-buchen--cancel {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border-hover);
}
.fk-buchen--cancel .ui-ico img { filter: invert(13%) sepia(15%) saturate(1200%) hue-rotate(190deg) brightness(95%); }
.fk-buchen--cancel:hover {
  background: var(--color-text);
  color: var(--brand-text-on);
  border-color: var(--color-text);
}
.fk-buchen--cancel:hover .ui-ico img { filter: brightness(0) invert(1); }

/* Danger-Variante (Basis) — section-spezifische Hover-/Disabled-Zustaende
   ergaenzt z.B. admin.css. */
.fk-buchen--danger {
  background: var(--status-danger-fg);
  color: var(--brand-text-on);
  border: 1px solid var(--status-danger-fg);
}
.fk-buchen--danger:hover {
  background: var(--status-danger-fg);
  filter: brightness(0.9);
}