/* ==========================================================================
   KE Super Image Widget (v1.1.41)
   Bild mit integrierten Styles + vordefinierten CSS-Filtern.

   Filter-Architektur: EIN filter-Ausdruck auf .ke-super-image__media img,
   komponiert aus CSS-Variablen --ke-si-*. Presets setzen Variablen-Sets;
   die Feintune-Slider (Elementor-selectors) überschreiben einzelne Variablen
   am Root; der Hover-Preset setzt sie beim :hover neu. Defaults neutral.
   ========================================================================== */

.ke-super-image {
    margin: 0;
    max-width: 100%;
    /* Box-Hover-Effekte (lift/glow) animieren am figure-Root */
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.ke-super-image__media {
    position: relative;
    overflow: hidden;
    line-height: 0;
}

.ke-super-image__media img {
    display: block;
    width: 100%;
    height: auto;
    filter:
        grayscale(var(--ke-si-grayscale, 0))
        sepia(var(--ke-si-sepia, 0))
        saturate(var(--ke-si-saturate, 1))
        brightness(var(--ke-si-bright, 1))
        contrast(var(--ke-si-contrast, 1))
        hue-rotate(var(--ke-si-hue, 0deg))
        blur(var(--ke-si-blur, 0px));
    transition: filter .4s ease, transform .4s ease;
}

/* Höhen-Modus: feste Höhe / Seitenverhältnis → img füllt den Media-Wrapper. */
.ke-super-image--sizing-fixed .ke-super-image__media img,
.ke-super-image--sizing-ratio .ke-super-image__media img {
    height: 100%;
}

/* ── Filter-Vorlagen (Variablen-Sets) ───────────────────────────────────── */
.ke-super-image--filter-bw        { --ke-si-grayscale: 100%; }
.ke-super-image--filter-grayscale { --ke-si-grayscale: 60%; }
.ke-super-image--filter-sepia     { --ke-si-sepia: 70%; }
.ke-super-image--filter-vintage   { --ke-si-sepia: 40%; --ke-si-contrast: 90%; --ke-si-bright: 95%; --ke-si-saturate: 120%; }
.ke-super-image--filter-warm      { --ke-si-saturate: 120%; --ke-si-hue: -10deg; --ke-si-bright: 105%; }
.ke-super-image--filter-cool      { --ke-si-saturate: 110%; --ke-si-hue: 15deg; }
.ke-super-image--filter-vivid     { --ke-si-saturate: 160%; --ke-si-contrast: 115%; }
.ke-super-image--filter-muted     { --ke-si-saturate: 70%; --ke-si-bright: 105%; }
.ke-super-image--filter-dramatic  { --ke-si-contrast: 140%; --ke-si-saturate: 110%; --ke-si-bright: 95%; }
.ke-super-image--filter-dark      { --ke-si-bright: 80%; --ke-si-contrast: 120%; --ke-si-saturate: 90%; }

/* ── Hover-Filter-Vorlagen (Variablen beim Hover neu setzen) ─────────────── */
.ke-super-image--hoverfilter-none:hover      { --ke-si-grayscale: 0; --ke-si-sepia: 0; --ke-si-saturate: 1; --ke-si-bright: 1; --ke-si-contrast: 1; --ke-si-hue: 0deg; --ke-si-blur: 0px; }
.ke-super-image--hoverfilter-bw:hover        { --ke-si-grayscale: 100%; }
.ke-super-image--hoverfilter-grayscale:hover { --ke-si-grayscale: 60%; }
.ke-super-image--hoverfilter-sepia:hover     { --ke-si-sepia: 70%; }
.ke-super-image--hoverfilter-vintage:hover   { --ke-si-sepia: 40%; --ke-si-contrast: 90%; --ke-si-bright: 95%; --ke-si-saturate: 120%; }
.ke-super-image--hoverfilter-warm:hover      { --ke-si-saturate: 120%; --ke-si-hue: -10deg; --ke-si-bright: 105%; }
.ke-super-image--hoverfilter-cool:hover      { --ke-si-saturate: 110%; --ke-si-hue: 15deg; }
.ke-super-image--hoverfilter-vivid:hover     { --ke-si-saturate: 160%; --ke-si-contrast: 115%; }
.ke-super-image--hoverfilter-muted:hover     { --ke-si-saturate: 70%; --ke-si-bright: 105%; }
.ke-super-image--hoverfilter-dramatic:hover  { --ke-si-contrast: 140%; --ke-si-saturate: 110%; --ke-si-bright: 95%; }
.ke-super-image--hoverfilter-dark:hover      { --ke-si-bright: 80%; --ke-si-contrast: 120%; --ke-si-saturate: 90%; }

/* ── Stil-Vorlagen (Bildfassung) ────────────────────────────────────────────
   Jede Vorlage liefert einen klar erkennbaren, eigenständigen Look. Trick
   gegen „weiß auf weiß": immer ein deutlicher Schatten, der die Fassung vom
   (oft hellen) Hintergrund abhebt. Die manuellen Controls (Rahmen/Radius/
   Schatten) wirken zusätzlich und übersteuern die Vorlage bei Bedarf. */

/* Karte — weiße Bildkarte mit Innenrand + deutlichem Schatten */
.ke-super-image--style-karte {
    background: #fff;
    padding: 10px;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}
.ke-super-image--style-karte .ke-super-image__media {
    border-radius: 8px;
}

/* Polaroid — breiter weißer Rand (unten am breitesten), Schatten, leichte Drehung */
.ke-super-image--style-polaroid {
    background: #fff;
    padding: 14px 14px 50px;
    border-radius: 3px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
    transform: rotate(-1.5deg);
}
.ke-super-image--style-polaroid .ke-super-image__caption--below {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    margin: 0;
    text-align: center;
    font-style: italic;
}

/* Gerahmt — Passepartout: weißer Innenrahmen + sichtbare dunkle Außenlinie + Schatten */
.ke-super-image--style-gerahmt .ke-super-image__media {
    border: 10px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18), 0 12px 26px rgba(0, 0, 0, 0.18);
}

/* Abgerundet — deutlich runde Ecken (fester Wert; --ke-radius-xl existiert nicht) */
.ke-super-image--style-abgerundet .ke-super-image__media {
    border-radius: 28px;
}

/* Schattenkarte — schwebende Karte mit großem weichem Schatten */
.ke-super-image--style-schattenkarte .ke-super-image__media {
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

/* ── Bildunterschrift ───────────────────────────────────────────────────── */
.ke-super-image__caption {
    line-height: 1.4;
    font-size: 0.9rem;
}
.ke-super-image__caption--below {
    margin-top: 8px;
}
.ke-super-image__caption--overlay-bottom,
.ke-super-image__caption--overlay-top {
    position: absolute;
    left: 0;
    right: 0;
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    z-index: 2;
}
.ke-super-image__caption--overlay-bottom { bottom: 0; }
.ke-super-image__caption--overlay-top    { top: 0; }

/* ── Hover-Effekte (hinter prefers-reduced-motion) ──────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    .ke-super-image--hover-lift:hover {
        transform: translateY(-6px);
        box-shadow: var(--ke-shadow-lg);
    }
    .ke-super-image--hover-glow:hover {
        box-shadow: 0 0 0 2px var(--ke-si-glow, #667eea), 0 8px 30px rgba(102, 126, 234, 0.35);
    }
    .ke-super-image--zoom:hover .ke-super-image__media img {
        transform: scale(1.05);
    }
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
    @media (prefers-reduced-motion: no-preference) {
        .ke-super-image--hover-glow:hover {
            box-shadow: 0 0 0 2px var(--ke-si-glow, #667eea),
                0 8px 30px color-mix(in srgb, var(--ke-si-glow, #667eea) 40%, transparent);
        }
    }
}