/* ==========================================================================
   KE Super-Button Widget (v0.22.0)
   ----------------------------------------------------------------------
   Dual-Layer-Architektur:
     __bg--normal + __overlay--normal  (Standard-Layer, z:0)
     __bg--hover  + __overlay--hover   (Hover-Layer, z:1, initial ausgeblendet)
     content/icon/badge                (z:2, immer oben)
   Der Button hat overflow:hidden, damit Slide/Diagonal/Overlap-Layer
   sauber hinter den Button-Kanten clippen.
   ========================================================================== */

.ke-super-button {
    --ke-super-button-duration: 400ms;
    --ke-super-easing: cubic-bezier(0.22, 1, 0.36, 1);

    position: relative;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    box-sizing: border-box;
    overflow: hidden;
    isolation: isolate;
    transition: transform var(--ke-super-button-duration) var(--ke-super-easing),
                box-shadow var(--ke-super-button-duration) ease;
}

/* Background- + Overlay-Layer */
.ke-super-button__bg,
.ke-super-button__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    will-change: transform, opacity, clip-path;
}

.ke-super-button__bg--normal,
.ke-super-button__overlay--normal {
    z-index: 0;
}

.ke-super-button__bg--hover,
.ke-super-button__overlay--hover {
    z-index: 1;
    opacity: 0;
    transition: opacity var(--ke-super-button-duration) var(--ke-super-easing),
                transform var(--ke-super-button-duration) var(--ke-super-easing),
                clip-path var(--ke-super-button-duration) var(--ke-super-easing);
}

/* Content/Icon/Badge immer über den Layern */
.ke-super-button__content,
.ke-super-button__icon,
.ke-super-button__badge {
    position: relative;
    z-index: 2;
}

.ke-super-button__content {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.ke-super-button__title,
.ke-super-button__subtitle {
    display: block;
    transition: color var(--ke-super-button-duration) ease;
}

.ke-super-button__title    { line-height: 1.3; }
.ke-super-button__subtitle { line-height: 1.4; }

.ke-super-button__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color var(--ke-super-button-duration) ease,
                transform var(--ke-super-button-duration) ease;
}

/* --------------------------------------------------------------------
   Hover-Effekte — alle schalten die Hover-Layer ein.
   Default-Verhalten (ohne Transform-Override): Fade.
   -------------------------------------------------------------------- */

/* Keiner: Hover-Layer bleibt versteckt */
.ke-super-button--effect-none:hover .ke-super-button__bg--hover,
.ke-super-button--effect-none:hover .ke-super-button__overlay--hover {
    opacity: 0;
}

/* Grow: Skaliert den ganzen Button */
.ke-super-button--effect-grow:hover {
    transform: scale(1.05);
}
.ke-super-button--effect-grow:hover .ke-super-button__bg--hover,
.ke-super-button--effect-grow:hover .ke-super-button__overlay--hover {
    opacity: 1;
}

/* Fade: nur opacity */
.ke-super-button--effect-fade:hover .ke-super-button__bg--hover,
.ke-super-button--effect-fade:hover .ke-super-button__overlay--hover {
    opacity: 1;
}

/* Slide (4 Richtungen): Hover-Layer startet außerhalb, rutscht rein */
.ke-super-button--effect-slide-up    .ke-super-button__bg--hover,
.ke-super-button--effect-slide-up    .ke-super-button__overlay--hover { opacity: 1; transform: translateY(100%); }
.ke-super-button--effect-slide-down  .ke-super-button__bg--hover,
.ke-super-button--effect-slide-down  .ke-super-button__overlay--hover { opacity: 1; transform: translateY(-100%); }
.ke-super-button--effect-slide-left  .ke-super-button__bg--hover,
.ke-super-button--effect-slide-left  .ke-super-button__overlay--hover { opacity: 1; transform: translateX(100%); }
.ke-super-button--effect-slide-right .ke-super-button__bg--hover,
.ke-super-button--effect-slide-right .ke-super-button__overlay--hover { opacity: 1; transform: translateX(-100%); }

.ke-super-button--effect-slide-up:hover    .ke-super-button__bg--hover,
.ke-super-button--effect-slide-up:hover    .ke-super-button__overlay--hover,
.ke-super-button--effect-slide-down:hover  .ke-super-button__bg--hover,
.ke-super-button--effect-slide-down:hover  .ke-super-button__overlay--hover,
.ke-super-button--effect-slide-left:hover  .ke-super-button__bg--hover,
.ke-super-button--effect-slide-left:hover  .ke-super-button__overlay--hover,
.ke-super-button--effect-slide-right:hover .ke-super-button__bg--hover,
.ke-super-button--effect-slide-right:hover .ke-super-button__overlay--hover {
    transform: translate(0, 0);
}

/* Diagonal (4 Ecken): Hover-Layer wächst aus der angegebenen Ecke heraus */
.ke-super-button--effect-diagonal-tl .ke-super-button__bg--hover,
.ke-super-button--effect-diagonal-tl .ke-super-button__overlay--hover { opacity: 1; transform: scale(0); transform-origin: top left; }
.ke-super-button--effect-diagonal-tr .ke-super-button__bg--hover,
.ke-super-button--effect-diagonal-tr .ke-super-button__overlay--hover { opacity: 1; transform: scale(0); transform-origin: top right; }
.ke-super-button--effect-diagonal-bl .ke-super-button__bg--hover,
.ke-super-button--effect-diagonal-bl .ke-super-button__overlay--hover { opacity: 1; transform: scale(0); transform-origin: bottom left; }
.ke-super-button--effect-diagonal-br .ke-super-button__bg--hover,
.ke-super-button--effect-diagonal-br .ke-super-button__overlay--hover { opacity: 1; transform: scale(0); transform-origin: bottom right; }

.ke-super-button--effect-diagonal-tl:hover .ke-super-button__bg--hover,
.ke-super-button--effect-diagonal-tl:hover .ke-super-button__overlay--hover,
.ke-super-button--effect-diagonal-tr:hover .ke-super-button__bg--hover,
.ke-super-button--effect-diagonal-tr:hover .ke-super-button__overlay--hover,
.ke-super-button--effect-diagonal-bl:hover .ke-super-button__bg--hover,
.ke-super-button--effect-diagonal-bl:hover .ke-super-button__overlay--hover,
.ke-super-button--effect-diagonal-br:hover .ke-super-button__bg--hover,
.ke-super-button--effect-diagonal-br:hover .ke-super-button__overlay--hover {
    /* scale(2) sorgt dafür, dass die Diagonale vollständig überdeckt ist */
    transform: scale(2);
}

/* Overlap horizontal: Hover-Layer klappt von links über den Button */
.ke-super-button--effect-overlap-h .ke-super-button__bg--hover,
.ke-super-button--effect-overlap-h .ke-super-button__overlay--hover {
    opacity: 1;
    transform: scaleX(0);
    transform-origin: left center;
}
.ke-super-button--effect-overlap-h:hover .ke-super-button__bg--hover,
.ke-super-button--effect-overlap-h:hover .ke-super-button__overlay--hover {
    transform: scaleX(1);
}

/* Overlap vertikal: Hover-Layer klappt von oben über den Button */
.ke-super-button--effect-overlap-v .ke-super-button__bg--hover,
.ke-super-button--effect-overlap-v .ke-super-button__overlay--hover {
    opacity: 1;
    transform: scaleY(0);
    transform-origin: center top;
}
.ke-super-button--effect-overlap-v:hover .ke-super-button__bg--hover,
.ke-super-button--effect-overlap-v:hover .ke-super-button__overlay--hover {
    transform: scaleY(1);
}

/* --------------------------------------------------------------------
   Badge / Ribbon
   -------------------------------------------------------------------- */

.ke-super-button__badge {
    --ke-super-badge-offset: -8px;
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    pointer-events: none;
    z-index: 3;
}

.ke-super-button__badge--top-left     { top: var(--ke-super-badge-offset); left: var(--ke-super-badge-offset); }
.ke-super-button__badge--top-right    { top: var(--ke-super-badge-offset); right: var(--ke-super-badge-offset); }
.ke-super-button__badge--bottom-left  { bottom: var(--ke-super-badge-offset); left: var(--ke-super-badge-offset); }
.ke-super-button__badge--bottom-right { bottom: var(--ke-super-badge-offset); right: var(--ke-super-badge-offset); }

/* Reduced-Motion: Alle Transitions deaktivieren (Barrierefreiheit) */
@media (prefers-reduced-motion: reduce) {
    .ke-super-button,
    .ke-super-button__bg--hover,
    .ke-super-button__overlay--hover,
    .ke-super-button__title,
    .ke-super-button__subtitle,
    .ke-super-button__icon {
        transition: none !important;
    }
    .ke-super-button--effect-grow:hover { transform: none; }
}