/**
 * LQIP – Low Quality Image Placeholder
 * Datei auf Server: /public/assets/css/lqip.css
 * Wird in main.php automatisch eingebunden.
 */

/* Platzhalter: unscharf bis echtes Bild geladen */
img.lqip-img {
    filter: blur(12px);
    transform: scale(1.05); /* verhindert weissen Rand durch blur */
    transition: filter 0.4s ease-in-out, transform 0.4s ease-in-out;
}

/* Sobald JS lqip-loaded setzt: Blur entfernen */
img.lqip-img.lqip-loaded {
    filter: blur(0);
    transform: scale(1);
}

/* Verhindert Layout-Shift beim Hero-Bild der Detailseite */
.recipe-hero-img-wrap {
    overflow: hidden;
}