/* Haupt-Wrapper mit dynamischen Schutzabständen */
.rs-bild-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
    margin-top: var(--rs-wrap-mt);
    margin-right: var(--rs-wrap-mr);
    margin-bottom: var(--rs-wrap-mb);
    margin-left: var(--rs-wrap-ml);
    z-index: 1;
}

.rs-bild-wrap img {
    display: block;
    max-width: 100%;
    height: auto;
    position: relative;
    z-index: 2;
    filter: var(--rs-base-f);
    border-radius: var(--rs-base-r);
    transition: all 0.4s ease;
}

/* 1. Ebene: Das eigentliche Basis-Bild */
.rs-bild-innen {
    position: relative;
    z-index: 2;
    border-style: solid;
    border-color: var(--rs-base-c);
    border-width: var(--rs-base-bw);
    border-radius: var(--rs-base-r);
    box-shadow: var(--rs-sh);
    transform: rotate(var(--rs-base-t));
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* 2. Ebene: Der externe Effekt-Rahmen */
.rs-effekt-rahmen {
    position: absolute;
    top: var(--rs-eff-y);
    left: var(--rs-eff-x);
    width: 100%;
    height: 100%;
    border: var(--rs-eff-w) solid var(--rs-eff-c);
    border-radius: var(--rs-eff-r);
    z-index: var(--rs-eff-z);
    transform: rotate(var(--rs-eff-t));
    pointer-events: none;
    transition: transform 0.4s ease;
}

/* Feature: Viewfinder (Nur Ecken) per CSS Maske */
.rs-effekt-rahmen.style-corners {
    -webkit-mask:
        linear-gradient(#000, #000) top left / 40px 40px no-repeat,
        linear-gradient(#000, #000) top right / 40px 40px no-repeat,
        linear-gradient(#000, #000) bottom left / 40px 40px no-repeat,
        linear-gradient(#000, #000) bottom right / 40px 40px no-repeat;
    mask:
        linear-gradient(#000, #000) top left / 40px 40px no-repeat,
        linear-gradient(#000, #000) top right / 40px 40px no-repeat,
        linear-gradient(#000, #000) bottom left / 40px 40px no-repeat,
        linear-gradient(#000, #000) bottom right / 40px 40px no-repeat;
}

/* --- OVERLAY TEXT --- */
.rs-overlay-text {
    position: absolute;
    z-index: 3;
    color: var(--rs-txt-c);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 1.4;
    max-width: 90%;
    pointer-events: none;
}

.rs-overlay-text.pos-bottom-left { bottom: 20px; left: 20px; }
.rs-overlay-text.pos-bottom-right { bottom: 20px; right: 20px; text-align: right; }
.rs-overlay-text.pos-top-left { top: 20px; left: 20px; }
.rs-overlay-text.pos-top-right { top: 20px; right: 20px; text-align: right; }
.rs-overlay-text.pos-center { top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 100%; }

/* --- DEZENTER KANTEN-SHINE --- */
.rs-shine-layer {
    position: absolute;
    top: calc(var(--rs-eff-w) * -1);
    left: calc(var(--rs-eff-w) * -1);
    right: calc(var(--rs-eff-w) * -1);
    bottom: calc(var(--rs-eff-w) * -1);
    border-radius: var(--rs-eff-r);
    padding: var(--rs-eff-w);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    overflow: hidden;
}

.rs-shine-layer::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 200%; height: 200%;
    background: conic-gradient(from 0deg, transparent 0deg, var(--rs-glow-c) 10deg, transparent 20deg, transparent 180deg, var(--rs-glow-c) 190deg, transparent 200deg);
    transform: translate(-50%, -50%) rotate(0deg);
    animation: rsRotateShine var(--rs-glow-s) linear infinite;
}

@keyframes rsRotateShine {
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.rs-bild-wrap.glow-none .rs-shine-layer { display: none; }

/* --- ANIMATION: Hover Tilt (Gegenläufig) --- */
.rs-bild-wrap.anim-type-hover_tilt:hover .rs-bild-innen {
    transform: rotate(calc(var(--rs-base-t) - 3deg)) scale(1.02);
}
.rs-bild-wrap.anim-type-hover_tilt:hover .rs-effekt-rahmen {
    transform: rotate(calc(var(--rs-eff-t) + 3deg)) scale(0.98);
}

/* --- ANIMATION: Scroll Tilt (Gegenläufig beim Scrollen) --- */
.rs-bild-wrap.anim-type-scroll_tilt .rs-bild-innen {
    transform: rotate(var(--rs-base-t)) scale(1);
    transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
}
.rs-bild-wrap.anim-type-scroll_tilt .rs-effekt-rahmen {
    transform: rotate(var(--rs-eff-t)) scale(1);
    transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}
.rs-bild-wrap.anim-type-scroll_tilt.is-active-scroll .rs-bild-innen {
    transform: rotate(calc(var(--rs-base-t) - 1.5deg)) scale(1.01);
}
.rs-bild-wrap.anim-type-scroll_tilt.is-active-scroll .rs-effekt-rahmen {
    transform: rotate(calc(var(--rs-eff-t) + 1.5deg)) scale(0.99);
}

/* --- ANIMATION: Float Y (Nur Schweben) --- */
@keyframes rsFloatYInner {
    0% { transform: translateY(0) rotate(var(--rs-base-t)); }
    50% { transform: translateY(-10px) rotate(var(--rs-base-t)); }
    100% { transform: translateY(0) rotate(var(--rs-base-t)); }
}
@keyframes rsFloatYFrame {
    0% { transform: translateY(0) rotate(var(--rs-eff-t)); }
    50% { transform: translateY(12px) rotate(var(--rs-eff-t)); }
    100% { transform: translateY(0) rotate(var(--rs-eff-t)); }
}
.rs-bild-wrap.anim-type-float_y .rs-bild-innen { animation: rsFloatYInner ease-in-out infinite; }
.rs-bild-wrap.anim-type-float_y .rs-effekt-rahmen { animation: rsFloatYFrame ease-in-out infinite; }

/* --- ANIMATION: Float Tilt (Schweben & Neigen) --- */
@keyframes rsFloatTiltInner {
    0% { transform: translateY(0) rotate(var(--rs-base-t)); }
    50% { transform: translateY(-10px) rotate(calc(var(--rs-base-t) + 1.5deg)); }
    100% { transform: translateY(0) rotate(var(--rs-base-t)); }
}
@keyframes rsFloatTiltFrame {
    0% { transform: translateY(0) rotate(var(--rs-eff-t)); }
    50% { transform: translateY(12px) rotate(calc(var(--rs-eff-t) - 1.5deg)); }
    100% { transform: translateY(0) rotate(var(--rs-eff-t)); }
}
.rs-bild-wrap.anim-type-float_tilt .rs-bild-innen { animation: rsFloatTiltInner ease-in-out infinite; }
.rs-bild-wrap.anim-type-float_tilt .rs-effekt-rahmen { animation: rsFloatTiltFrame ease-in-out infinite; }

/* Steuerbare Geschwindigkeiten */
.rs-bild-wrap.anim-speed-relax .rs-bild-innen,
.rs-bild-wrap.anim-speed-relax .rs-effekt-rahmen { animation-duration: 8s; }

.rs-bild-wrap.anim-speed-slow .rs-bild-innen,
.rs-bild-wrap.anim-speed-slow .rs-effekt-rahmen { animation-duration: 14s; }

.rs-bild-wrap.anim-speed-super_slow .rs-bild-innen,
.rs-bild-wrap.anim-speed-super_slow .rs-effekt-rahmen { animation-duration: 20s; }