/* ============================================================
   masonry_grid.css — Universelle Masonry-Wand (wiederverwendbar)
   Nur Positionierung + Stagger + "Mehr anzeigen". Das AUSSEHEN
   der Kacheln kommt aus dem jeweiligen Karten-CSS (z.B. feedback_card.css).
   Optik/Stagger deckungsgleich zur Entdeckungs-Suche (ki_search.css).
   ============================================================ */

.m-grid {
    position: relative;
    width: 100%;
    /* Hoehe setzt das JS. Vor JS-Layout fliessen die Kacheln (Fallback unten). */
}

.m-grid__item {
    position: absolute;   /* wird vom JS gesetzt */
    top: 0;
    left: 0;
    overflow: hidden;
    border-radius: 12px;
    /* Hover ueber Schatten/Helligkeit -> KEIN transform (kein Konflikt mit Stagger) */
    transition: box-shadow .28s ease, filter .28s ease;
}

/* ── Stagger: Startzustand SCHON hier (vor erstem Paint) -> kein Flash.
   Deckungsgleich mit stagger.js / ki_search.css ── */
.m-grid__item[data-staggered-item] {
    transition:
        opacity   var(--stagger-duration, 600ms) cubic-bezier(0.16, 1, 0.3, 1),
        transform var(--stagger-duration, 600ms) cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow .28s ease;
}

.m-grid__item[data-staggered-item]:not(.staggered-end) {
    opacity: 0;
    transform: translateY(124px);
}

/* ── Fallback OHNE JS-Layout: wenigstens sichtbar (fliessende Bloecke) ── */
.m-grid:not([data-mason-ready]) .m-grid__item {
    position: relative;
    display: inline-block;
    width: 31.5%;
    margin: 0 .75% 16px;
    vertical-align: top;
    height: auto !important;
}

/* ── "Mehr anzeigen" ── */
.m-grid-more {
    display: flex;
    justify-content: center;
    margin: 34px 10px ;
}

/* Button-Look kommt aus dem Atelier-System (btn btn--outline, css/2026_v2/btn.css).
   .mg-load-more bleibt als Haken fuers JS, hier nur der Zustand beim Laden. */
.mg-load-more:disabled {
    opacity: .5;
    cursor: default;
    pointer-events: none;
}