/* KKS – Flexible Contao-5-Galerien
   Abgestimmt auf screen_test.css (Stand Oktober 2026).
   Im Contao-Seitenlayout NACH screen_test.css laden.
   Die Bildgrößen kommen ausschließlich aus den Contao-Bildeinstellungen.
*/

/* Freie Bildreihen statt starrer 4-/5-Spalten-Anordnung */
#main .content-gallery > ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: flex-start;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Spaltenvorgaben des bisherigen Layouts für Galerieeinträge aufheben */
#main .content-gallery > ul > li {
    float: none;
    clear: none;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#main .content-gallery figure {
    margin: 0;
    max-width: 100%;
}

/* KEINE feste Bildhöhe oder -breite: Contao-Werte respektieren.
   Rahmen und 5px Innenabstand aus screen_test.css bleiben bestehen. */
#main .content-gallery img {
    display: block;
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
    margin: 0;
}

/* Unabhängige Galerien untereinander */
#main .content-gallery + .content-gallery {
    margin-top: 20px;
}

/* In screen_test.css wird unter 768px sonst für alle #main-Bilder
   margin-bottom:15px gesetzt. Das würde Galeriebilder ungleich verteilen. */
@media screen and (max-width: 768px) {
    #main .content-gallery img {
        max-width: 100%;
        margin-bottom: 0;
    }
}