/* ==========================================================================
   Masonry Layout – responsive (3 / 2 / 1 Spalten)
   Funktioniert mit beliebig vielen .masonry-Containern auf derselben Seite.
   ========================================================================== */

.masonry {
    position: relative;
    width: 100%;
}

/* Platzhalter-Element, das Masonry vor dem Init nutzt, um sauber
   umzubrechen (verhindert "Flash of unstyled layout") */
.masonry.masonry--loading .item {
    visibility: hidden;
}

.masonry .item {
    box-sizing: border-box;
    width: 33.333%;         /* Desktop: 3 Items nebeneinander */
}

.masonry .iteminner {
    box-sizing: border-box;
    height: 100%;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 4px;
}

.masonry .iteminner h3 {
    margin-top: 0;
}

.masonry .iteminner img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-bottom: .75rem;
    border-radius: 3px;
}

/* ---- Tablet: 2 Items nebeneinander ---- */
@media screen and (max-width: 992px) {
    .masonry .item {
        width: 50%;
    }
}

/* ---- Mobile: 1 Item pro Zeile ---- */
@media screen and (max-width: 600px) {
    .masonry .item {
        width: 100%;
    }
}