/*
 * ====================================================================
 * bs5_skeleton.css
 * ====================================================================
 * Skeleton-Loader / Shimmer für Ladezustände (lazy images, cards).
 * Aktiviert durch Klassen, nicht per Default — JS (in app.js) setzt
 * .fm-skeleton--image auf <img loading="lazy"> bis zum load-Event.
 * Siehe Plan: U2.3
 * ====================================================================
 */

.fm-skeleton {
    position: relative;
    overflow: hidden;
    background-color: var(--fm-bg-light-alt, #e9ecef);
}

.fm-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.6) 50%,
            rgba(255, 255, 255, 0) 100%
    );
    transform: translateX(-100%);
    animation: fm-skeleton-shimmer 1.4s linear infinite;
}

/* Skeleton auf Bildern, solange sie laden — Opt-in via data-fm-skeleton.
   Pseudo-Elemente auf <img> rendern browserabhängig nicht zuverlässig,
   deshalb Shimmer über einen Wrapper .fm-skeleton--wrap (position:relative)
   plus ::after. Fallback: solider Background-Color auf dem <img> selbst,
   falls kein Wrapper vorhanden ist. */
.fm-skeleton--image:not(.is-loaded) {
    color: transparent;
    background-color: var(--fm-bg-light-alt, #e9ecef);
}

.fm-skeleton--wrap {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.fm-skeleton--wrap:has(img.fm-skeleton--image:not(.is-loaded))::after,
.fm-skeleton--wrap.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.55) 50%,
            rgba(255, 255, 255, 0) 100%
    );
    transform: translateX(-100%);
    animation: fm-skeleton-shimmer 1.4s linear infinite;
    pointer-events: none;
}

.fm-skeleton--text {
    display: inline-block;
    width: 100%;
    height: 0.85em;
    border-radius: 4px;
    vertical-align: middle;
}

.fm-skeleton--card {
    width: 100%;
    height: 240px;
    border-radius: 8px;
}

@keyframes fm-skeleton-shimmer {
    100% {
        transform: translateX(100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fm-skeleton::after,
    .fm-skeleton--image:not(.is-loaded)::after {
        animation: none;
    }
}