/* ==========================================================================
   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                       (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 immer über den Layern */
.ke-super-button__content,
.ke-super-button__icon {
    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);
}

/* ==========================================================================
   FLOATING BUTTON / FAB (v0.38.0)
   --------------------------------------------------------------------------
   Aktiviert via `button_type = floating`. Der `<a>`-Tag bekommt
   `position: fixed` direkt; CSS-Variablen `--ke-fab-offset-x/y` liefern
   den Abstand pro Position-Variante.
   ========================================================================== */

.ke-super-button--floating {
    --ke-fab-offset-x: 20px;
    --ke-fab-offset-y: 20px;
    position: fixed;
    z-index: 9999;
}

.ke-super-button--fab-bottom-right { right: var(--ke-fab-offset-x); bottom: var(--ke-fab-offset-y); }
.ke-super-button--fab-bottom-left  { left:  var(--ke-fab-offset-x); bottom: var(--ke-fab-offset-y); }
.ke-super-button--fab-top-right    { right: var(--ke-fab-offset-x); top:    var(--ke-fab-offset-y); }
.ke-super-button--fab-top-left     { left:  var(--ke-fab-offset-x); top:    var(--ke-fab-offset-y); }
.ke-super-button--fab-middle-right { right: var(--ke-fab-offset-x); top: 50%; transform: translateY(-50%); }
.ke-super-button--fab-middle-left  { left:  var(--ke-fab-offset-x); top: 50%; transform: translateY(-50%); }

/* Hover-Grow auf middle-Position: kombinierte Transform muss erhalten bleiben */
.ke-super-button--fab-middle-right.ke-super-button--effect-grow:hover,
.ke-super-button--fab-middle-left.ke-super-button--effect-grow:hover {
    transform: translateY(-50%) scale(1.05);
}

/* ==========================================================================
   STIL-PRESETS (v0.38.0)
   --------------------------------------------------------------------------
   Wrapper-Klassen via Elementor `prefix_class` → `.ke-super-button-preset--*`.
   KEIN `!important` — User-eigene Style-Controls gewinnen via Specificity.
   Presets setzen nur Defaults, keine Sperren.
   ========================================================================== */

/* Minimal — flach, kein Box-Shadow */
.ke-super-button-preset--minimal .ke-super-button {
    box-shadow: none;
}

/* Glow — weicher Halo, intensiver bei Hover */
.ke-super-button-preset--glow .ke-super-button {
    --ke-super-glow-color: #6366f1;
    box-shadow: 0 10px 40px -10px var(--ke-super-glow-color);
}
.ke-super-button-preset--glow .ke-super-button:hover {
    box-shadow: 0 18px 60px -10px var(--ke-super-glow-color);
}

/* Pulse — sanfte Skalierung für Aufmerksamkeit */
.ke-super-button-preset--pulse .ke-super-button {
    animation: ke-super-pulse 2.4s ease-in-out infinite;
}
.ke-super-button-preset--pulse .ke-super-button:hover {
    animation-play-state: paused;
}
@keyframes ke-super-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.045); }
}

/* Pulse + FAB middle-Position: kombinierte Animation mit Y-Versatz */
.ke-super-button-preset--pulse .ke-super-button--fab-middle-right,
.ke-super-button-preset--pulse .ke-super-button--fab-middle-left {
    animation: ke-super-pulse-mid 2.4s ease-in-out infinite;
}
@keyframes ke-super-pulse-mid {
    0%, 100% { transform: translateY(-50%) scale(1); }
    50%      { transform: translateY(-50%) scale(1.045); }
}

/* CTA-Mega — XL Marketing-Button: großes Padding, prominenter Titel.
   v0.39.3: deutlich auffälliger — Title +25 % auf 1.55em, bold-extra 800,
   leicht negatives Letter-Spacing für moderne Tight-Optik. Padding 28/56. */
.ke-super-button-preset--cta-mega .ke-super-button {
    padding: 28px 56px;
}
.ke-super-button-preset--cta-mega .ke-super-button__title {
    font-size: 1.55em;
    font-weight: 800;
    letter-spacing: -0.005em;
    line-height: 1.15;
}
.ke-super-button-preset--cta-mega .ke-super-button__subtitle {
    font-size: 1.05em;
    margin-top: 8px;
}

/* 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; }
    .ke-super-button-preset--pulse .ke-super-button { animation: none; }
}