.knopf-fx.knopf-fx {
  --kx: 0px; --ky: 0px; --mx: 50%; --my: 50%;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 48px; padding: 6px 6px 6px 24px;
  color: #fff; text-decoration: none;
  transform: none;
  translate: var(--kx) var(--ky);
  transition: background .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s cubic-bezier(.2, .8, .2, 1), scale .18s cubic-bezier(.2, .8, .2, 1);
  -webkit-tap-highlight-color: transparent;
}
.knopf-fx.knopf-fx:not(:disabled) {
  background: linear-gradient(180deg, #1a86f5 0%, #0068d9 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(0, 45, 100, .22), 0 10px 24px -10px rgba(0, 113, 227, .7);
}

.knopf-fx.knopf-fx::after {
  content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Ccircle cx='17' cy='17' r='17' fill='%23ffffff'/%3E%3Cg transform='translate(8.5 8.5) scale(.7083)' fill='none' stroke='%230071e3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/g%3E%3C/svg%3E") center / 100% no-repeat;
  box-shadow: 0 1px 3px rgba(0, 40, 90, .28);
  transition: transform .32s cubic-bezier(.34, 1.56, .64, 1), opacity .2s;
}

.knopf-fx.knopf-fx::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  color: #fff;
  background: radial-gradient(150px circle at var(--mx) var(--my), currentColor, transparent 62%);
  opacity: 0; transition: opacity .3s cubic-bezier(.2, .8, .2, 1);
}

@media (hover: hover) {
  .knopf-fx.knopf-fx:not(:disabled):hover {
    background: linear-gradient(180deg, #2a90f7 0%, #0071e3 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 2px 4px rgba(0, 45, 100, .2), 0 16px 30px -12px rgba(0, 113, 227, .85);
  }
  .knopf-fx.knopf-fx:not(:disabled):hover::before { opacity: .34; }
  .knopf-fx.knopf-fx:not(:disabled):hover::after { transform: rotate(-45deg) scale(1.06); }
}

.knopf-fx.knopf-fx:active { transform: none; }
.knopf-fx.knopf-fx:not(:disabled):active { scale: .97; }
.knopf-fx.knopf-fx:not(:disabled):active::after { transform: rotate(-45deg) scale(.92); }
.knopf-fx.knopf-fx:disabled::after { opacity: .7; }

.knopf-fx.knopf-fx:focus-visible { outline: 3px solid rgba(0, 113, 227, .5); outline-offset: 3px; }

.knopf-fx.knopf-fx.big { min-height: 56px; padding: 7px 7px 7px 30px; gap: 14px; }
.knopf-fx.knopf-fx.big::after { width: 42px; height: 42px; }
.knopf-fx.knopf-fx.btn-sm { min-height: 44px; padding: 5px 5px 5px 18px; gap: 10px; }

@media (prefers-reduced-motion: reduce) {
  .knopf-fx.knopf-fx, .knopf-fx.knopf-fx::before, .knopf-fx.knopf-fx::after { transition: none; }
  .knopf-fx.knopf-fx:not(:disabled):hover::after, .knopf-fx.knopf-fx:not(:disabled):active::after { transform: none; }
}