.knopf{--kg: transparent;--ks: var(--navy);--kr: transparent;--kf: var(--navy);--ka: var(--creme);position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);min-height:var(--knopf-hoehe);padding:var(--knopf-innen);border:0;border-radius:var(--radius-pill);background:var(--kg);box-shadow:inset 0 0 0 var(--kante-knopf) var(--kr);color:var(--ks);font-family:inherit;font-size:var(--fs-knopf);font-weight:var(--w-fett);line-height:1;text-align:center;text-decoration:none;cursor:pointer;-webkit-appearance:none;appearance:none}.knopf:before{content:"";position:absolute;inset:0;z-index:-1;background:var(--kf);transform:scaleX(0);transform-origin:left}.knopf .pf{width:1.1em;height:1.1em;flex:none}.knopf:is(:hover,:focus-visible,.ist-hover,.ist-fokus){color:var(--ka)}.knopf:is(:hover,:focus-visible,.ist-hover,.ist-fokus):before{transform:scaleX(1)}.knopf.ist-fokus{outline:var(--focus-ring-width) solid var(--focus-ring);outline-offset:var(--focus-ring-offset)}.knopf-primaer{--kg: var(--koralle)}.knopf-zweit{--kr: var(--navy)}[data-surface=inverse] .knopf-primaer{--kf: var(--creme);--ka: var(--navy)}[data-surface=inverse] .knopf-hell{--kg: var(--creme);--kf: var(--koralle);--ka: var(--navy)}[data-surface=inverse] .knopf-zweit{--ks: var(--creme);--kr: var(--creme);--kf: var(--creme);--ka: var(--navy)}[data-surface=akzent] .knopf-primaer{--kg: var(--navy);--ks: var(--creme);--kf: var(--creme);--ka: var(--navy)}[data-surface=akzent] .knopf-zweit{--kr: var(--navy)}.knopf:disabled{--kg: transparent;--ks: var(--schiefer-ink);--kr: var(--linie-stark);cursor:not-allowed}.knopf:disabled:before{display:none}.knopf-klein{min-height:var(--knopf-hoehe-klein);padding:var(--knopf-innen-klein);gap:var(--space-2);font-size:var(--fs-knopf-klein)}@media(prefers-reduced-motion:no-preference){.knopf{transition:color 1ms linear var(--dur-1)}.knopf:before{transition:transform var(--dur-2) var(--ease-out)}.knopf .pf{transition:translate var(--dur-2) var(--ease-out)}.knopf:is(:hover,.ist-hover) .pf{translate:.2em 0}}