.sl-roll-button-wrap {
    display: flex;
    width: 100%;
}

.sl-roll-button {
    --sl-roll-distance: 1.15em;
    --sl-roll-duration: 420ms;
    --sl-roll-easing: cubic-bezier(.2,.8,.2,1);
    --sl-icon-hover-distance: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    color: #fff;
    background: #111;
    text-decoration: none;
    border: 0 solid transparent;
    cursor: pointer;
    line-height: 1.1;
    transition: color var(--sl-roll-duration) var(--sl-roll-easing),
                background-color var(--sl-roll-duration) var(--sl-roll-easing),
                border-color var(--sl-roll-duration) var(--sl-roll-easing),
                box-shadow var(--sl-roll-duration) var(--sl-roll-easing),
                transform var(--sl-roll-duration) var(--sl-roll-easing);
}

.sl-roll-button:hover,
.sl-roll-button:focus,
.sl-roll-button:focus-visible {
    color: inherit;
    text-decoration: none;
    outline: none;
}

.sl-roll-button__text {
    display: grid;
    overflow: hidden;
    height: var(--sl-roll-distance);
    line-height: var(--sl-roll-distance);
    perspective: 7em;
}

.sl-roll-button__text > span {
    grid-area: 1 / 1;
    display: block;
    white-space: nowrap;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    transition: transform var(--sl-roll-duration) var(--sl-roll-easing);
}

/* Cube-Roll: Text wirkt wie eine nach oben kippende Würfelfläche */
.sl-roll-effect-cube .sl-roll-button__text > span:first-child {
    transform-origin: 50% 0%;
    transform: translateY(0) rotateX(0deg);
}

.sl-roll-effect-cube .sl-roll-button__text > span + span {
    transform-origin: 50% 100%;
    transform: translateY(var(--sl-roll-distance)) rotateX(-90deg);
}

.sl-roll-effect-cube:hover .sl-roll-button__text > span:first-child,
.sl-roll-effect-cube:focus-visible .sl-roll-button__text > span:first-child {
    transform: translateY(calc(var(--sl-roll-distance) * -1)) rotateX(90deg);
}

.sl-roll-effect-cube:hover .sl-roll-button__text > span + span,
.sl-roll-effect-cube:focus-visible .sl-roll-button__text > span + span {
    transform: translateY(0) rotateX(0deg);
}

/* Optional: klassische Schiebe-Animation */
.sl-roll-effect-slide .sl-roll-button__text > span:first-child {
    transform: translateY(0);
}

.sl-roll-effect-slide .sl-roll-button__text > span + span {
    transform: translateY(var(--sl-roll-distance));
}

.sl-roll-effect-slide:hover .sl-roll-button__text > span:first-child,
.sl-roll-effect-slide:focus-visible .sl-roll-button__text > span:first-child {
    transform: translateY(calc(var(--sl-roll-distance) * -1));
}

.sl-roll-effect-slide:hover .sl-roll-button__text > span + span,
.sl-roll-effect-slide:focus-visible .sl-roll-button__text > span + span {
    transform: translateY(0);
}

.sl-roll-button__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    line-height: 1;
    transition: transform var(--sl-roll-duration) var(--sl-roll-easing);
}

.sl-roll-button__icon svg,
.sl-roll-button__icon i {
    width: 1em;
    height: 1em;
    display: block;
    fill: currentColor;
    color: currentColor;
}

/* Standard: Icon bleibt vollständig fix, auch wenn Theme/Elementor eigene Hover-Transforms setzt. */
.sl-roll-button.sl-roll-icon-motion-no .sl-roll-button__icon,
.sl-roll-button.sl-roll-icon-motion-no:hover .sl-roll-button__icon,
.sl-roll-button.sl-roll-icon-motion-no:focus-visible .sl-roll-button__icon {
    transform: none !important;
}

/* Optional steuerbare Icon-Bewegung. */
.sl-roll-button.sl-roll-icon-motion-yes.sl-roll-icon-motion-right:hover .sl-roll-button__icon,
.sl-roll-button.sl-roll-icon-motion-yes.sl-roll-icon-motion-right:focus-visible .sl-roll-button__icon {
    transform: translateX(var(--sl-icon-hover-distance));
}

.sl-roll-button.sl-roll-icon-motion-yes.sl-roll-icon-motion-left:hover .sl-roll-button__icon,
.sl-roll-button.sl-roll-icon-motion-yes.sl-roll-icon-motion-left:focus-visible .sl-roll-button__icon {
    transform: translateX(calc(var(--sl-icon-hover-distance) * -1));
}

.sl-roll-button.sl-roll-icon-motion-yes.sl-roll-icon-motion-up:hover .sl-roll-button__icon,
.sl-roll-button.sl-roll-icon-motion-yes.sl-roll-icon-motion-up:focus-visible .sl-roll-button__icon {
    transform: translateY(calc(var(--sl-icon-hover-distance) * -1));
}

.sl-roll-button.sl-roll-icon-motion-yes.sl-roll-icon-motion-down:hover .sl-roll-button__icon,
.sl-roll-button.sl-roll-icon-motion-yes.sl-roll-icon-motion-down:focus-visible .sl-roll-button__icon {
    transform: translateY(var(--sl-icon-hover-distance));
}

.sl-roll-button-align-stretch .sl-roll-button-wrap .sl-roll-button,
.sl-roll-button-wrap[data-align="stretch"] .sl-roll-button,
.sl-roll-button-stretch {
    width: 100%;
}