/* ----------------------------------------------------------
   PhotoSwipe5
   Basislayout
---------------------------------------------------------- */

.mz-pswp5 {
    /*
     * Der PHP-/Adminwert wird als Standardwert ausgegeben.
     * Modifikatorklassen können die jeweiligen Arbeitsvariablen
     * überschreiben.
     */
    --pswp5-thumb-width-default: 200px;
    --pswp5-justified-row-height-default: 200px;
    --pswp5-masonry-column-width-default: 200px;
    --pswp5-layout-gap-default: 4px;

    --pswp5-thumb-width: var(--pswp5-thumb-width-default);
    --pswp5-justified-row-height: var(--pswp5-justified-row-height-default);
    --pswp5-masonry-column-width: var(--pswp5-masonry-column-width-default);
    --pswp5-layout-gap: var(--pswp5-layout-gap-default);

    /*
     * Standard-Seitenverhältnis für den Cover-Modus.
     *
	 * Standard-Seitenverhältnis für die Einzelbild-Modi
	 * single, cover und lightbox.
     */
    --pswp5-cover-ratio: 4 / 3;

    /*
     * Interne Toleranz um die gewünschte Standardbreite.
     *
     * Bei 200px ergeben sich:
     * Minimum: 180px
     * Maximum: 220px
     */
    --pswp5-thumb-shrink: 20px;
    --pswp5-thumb-grow: 20px;

    --pswp5-thumb-min-width:
        calc(var(--pswp5-thumb-width) - var(--pswp5-thumb-shrink));

    --pswp5-thumb-max-width:
        calc(var(--pswp5-thumb-width) + var(--pswp5-thumb-grow));

    --pswp5-max-cols: 0;
    --pswp5-limited-track-min: 0px;

    /*
     * Abstand im normalen Galerie-Grid.
     */
    --pswp5-gap: 12px;

/*
 * Mosaic:
 *
 * Bei einer maximalen Breite von 1000px werden die vier
 * kleinen Kacheln jeweils ungefähr 250px breit. Das Hauptbild
 * nimmt die doppelte Breite und doppelte Höhe ein.
 */
--pswp5-mosaic-gap: var(--pswp5-layout-gap, 4px);
--pswp5-mosaic-max-width: 1000px;
--pswp5-mosaic-ratio: 2 / 1;

--pswp5-mosaic-mobile-main-ratio: 16 / 9;
--pswp5-mosaic-mobile-thumb-ratio: 4 / 3;

	/*
	 * Seitenverhältnisse im vereinfachten mobilen Mosaic.
	 */
	--pswp5-mosaic-mobile-main-ratio: 16 / 9;
	--pswp5-mosaic-mobile-thumb-ratio: 4 / 3;

    --pswp5-radius: 8px;
    --pswp5-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    --pswp5-thumb-ratio-default: 4 / 3;
	--pswp5-thumb-ratio: var(--pswp5-thumb-ratio-default);

    min-width: 0;
    max-width: 100%;
}

/* ----------------------------------------------------------
   Gallery Grid
---------------------------------------------------------- */

.mz-pswp5__grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(
            min(
                100%,
                var(--pswp5-thumb-min-width, 180px)
            ),
            1fr
        )
    );
    gap: var(--pswp5-gap, 12px);
    justify-content: center;
    align-items: start;
}

/*
 * Bei gesetzter maximaler Spaltenzahl wird die Mindestbreite
 * eines Grid-Tracks so vergrößert, dass höchstens die
 * gewünschte Zahl von Spalten nebeneinander Platz findet.
 *
 * Auf schmalen Flächen bricht das Grid weiterhin automatisch
 * auf weniger Spalten um.
 */
.mz-pswp5--gallery.mz-pswp5--limited-cols .mz-pswp5__grid {
    grid-template-columns: repeat(
        auto-fit,
        minmax(
            min(
                100%,
                max(
                    var(--pswp5-thumb-min-width, 180px),
                    var(--pswp5-limited-track-min, 0px)
                )
            ),
            1fr
        )
    );
}

/* ----------------------------------------------------------
   Items
---------------------------------------------------------- */

.mz-pswp5__item {
    margin: 0;
}

.mz-pswp5__item--hidden {
    display: none;
}

.mz-pswp5__link {
    display: block;
    text-decoration: none;
}

/* ----------------------------------------------------------
   Thumbnails
---------------------------------------------------------- */

.mz-pswp5__thumb {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--pswp5-thumb-ratio);
    object-fit: cover;
    border-radius: var(--pswp5-radius);
    box-shadow: var(--pswp5-shadow);
    transition: transform 0.25s ease, opacity 0.25s ease;
}

/*
 * Die maximale Thumbnailbreite gilt ausschließlich im
 * Galerie-Modus. Single und Cover verwenden weiterhin
 * --pswp5-single-width.
 *
 * Die Begrenzung liegt am gesamten Grid-Item, damit Bild und
 * Untertitel dieselbe Breite behalten.
 */
.mz-pswp5--gallery .mz-pswp5__item {
    width: 100%;
    max-width: var(--pswp5-thumb-max-width, 220px);
    justify-self: center;
}

.mz-pswp5--gallery .mz-pswp5__thumb {
    width: 100%;
    max-width: none;
}

.mz-pswp5__link:hover .mz-pswp5__thumb,
.mz-pswp5__link:focus .mz-pswp5__thumb {
    transform: scale(1.03);
}

/* ----------------------------------------------------------
   Caption
---------------------------------------------------------- */

.mz-pswp5__caption {
    margin-top: 0.5rem;
    font-size: 0.92rem;
    line-height: 1.4;
    min-height: calc(var(--pswp5-caption-lines, 2) * 1.4em);
    display: -webkit-box;
    -webkit-line-clamp: var(--pswp5-caption-lines, 2);
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mz-pswp5--single .mz-pswp5__caption,
.mz-pswp5--cover .mz-pswp5__caption,
.mz-pswp5--lightbox .mz-pswp5__caption {
    display: none;
}

/* ----------------------------------------------------------
   Single / Cover
---------------------------------------------------------- */

.mz-pswp5--single,
.mz-pswp5--cover,
.mz-pswp5--lightbox {
    width: min(100%, var(--pswp5-single-width, 480px));
    max-width: var(--pswp5-single-width, 480px);
}

.mz-pswp5--single .mz-pswp5__item,
.mz-pswp5--cover .mz-pswp5__item,
.mz-pswp5--lightbox .mz-pswp5__item {
    position: relative;
    width: 100%;
}

.mz-pswp5--single .mz-pswp5__start,
.mz-pswp5--cover .mz-pswp5__start,
.mz-pswp5--lightbox .mz-pswp5__start {
    width: 100%;
}

/*
 * Single / Cover / Lightbox:
 * einheitliche Vorschaufläche.
 * Abweichende Bildformate werden mittig beschnitten.
 */
.mz-pswp5--single .mz-pswp5__thumb,
.mz-pswp5--cover .mz-pswp5__thumb,
.mz-pswp5--lightbox .mz-pswp5__thumb,
.mz-pswp5__thumb--cover-visual {
    display: block;
    width: 100%;
    aspect-ratio: var(--pswp5-cover-ratio, 4 / 3);
    object-fit: cover;
    object-position: center;
}

/* ----------------------------------------------------------
   Cover
   Das sichtbare Coverbild liegt außerhalb des Links.
   Der Link wird transparent darübergelegt.
---------------------------------------------------------- */

.mz-pswp5--cover .mz-pswp5__link {
    position: absolute;
    inset: 0;
    display: block;
    z-index: 2;
    cursor: pointer;
}

.mz-pswp5__thumb--cover-visual {
    position: relative;
    z-index: 1;
}

/* ----------------------------------------------------------
   Fehlerausgabe
---------------------------------------------------------- */

.mz-pswp5-errors {
    margin: 1rem 0;
}

.mz-pswp5-error {
    padding: 0.75rem 1rem;
    border: 1px solid currentColor;
    border-radius: 0.5rem;
}

/* ----------------------------------------------------------
   PhotoSwipe5 Zähler ausblenden
---------------------------------------------------------- */

.pswp--mz-pswp5-no-counter .pswp__counter {
    display: none;
}

/* ----------------------------------------------------------
   PhotoSwipe5 Fullscreen-Button
---------------------------------------------------------- */

.pswp--mz-pswp5 .pswp__button--fullscreen-button svg {
    color: #fff;
}

/* ----------------------------------------------------------
   PhotoSwipe5 Lightbox Caption
---------------------------------------------------------- */

.pswp--mz-pswp5 .pswp__custom-caption {
    position: absolute;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    width: min(92vw, 960px);
    max-height: min(25vh, 14rem);
    overflow-y: auto;
    padding: 0.8rem 1rem;
    font-size: 0.95rem;
    line-height: 1.45;
    color: #fff;
    background: rgba(0, 0, 0, 0.72);
    border-radius: 0.6rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.35);
    pointer-events: auto;
}

.pswp--mz-pswp5 .pswp__custom-caption:empty,
.pswp--mz-pswp5 .pswp__custom-caption[hidden] {
    display: none;
}

@media (max-width: 700px) {
    .pswp--mz-pswp5 .pswp__custom-caption {
        bottom: 0.5rem;
        width: calc(100vw - 1rem);
        max-height: 28vh;
        padding: 0.7rem 0.8rem;
        font-size: 0.9rem;
    }
}

/* ----------------------------------------------------------
   Gallery-Modus: justified
   Jede Zeile ist ein eigener Flex-Container, erzeugt in
   photoswipe-init.js. Kein erzwungener Umbruch mehr nötig.
---------------------------------------------------------- */

.mz-pswp5--gallery-justified,
.mz-pswp5--gallery-justified .mz-pswp5__grid,
.mz-pswp5--gallery-justified .mz-pswp5__row,
.mz-pswp5--gallery-justified .mz-pswp5__item {
    min-width: 0;
    max-width: 100%;
}

.mz-pswp5--gallery-justified .mz-pswp5__grid {
    display: block;
    width: 100%;
}

.mz-pswp5--gallery-justified .mz-pswp5__row {
    display: flex;
    gap: var(--pswp5-layout-gap, 4px);
}

.mz-pswp5--gallery-justified .mz-pswp5__row + .mz-pswp5__row {
    margin-top: var(--pswp5-layout-gap, 4px);
}

.mz-pswp5--gallery-justified .mz-pswp5__item {
    margin: 0;
    overflow: hidden;
    flex: 0 0 auto;

    /*
     * Platzhaltergröße, bis das JS die exakte Zeilenhöhe
     * berechnet hat. Verhindert einen Layout-Sprung beim
     * ersten Rendern.
     */
    width: 220px;
    aspect-ratio: 3 / 2;
}

.mz-pswp5--gallery-justified .mz-pswp5__thumb {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    border-radius: var(--pswp5-radius);
}

.mz-pswp5--gallery-justified .mz-pswp5__caption {
    display: none;
}

/* ----------------------------------------------------------
   Gallery-Modus: masonry
   Reines CSS über column-width, kein JS nötig. Jedes Bild
   behält sein Originalseitenverhältnis.
---------------------------------------------------------- */

.mz-pswp5--gallery-masonry .mz-pswp5__grid {
    display: block;
    column-width: var(--pswp5-masonry-column-width, 200px);
    column-gap: var(--pswp5-layout-gap, 4px);
}

.mz-pswp5--gallery-masonry .mz-pswp5__item {
    break-inside: avoid;
    margin: 0 0 var(--pswp5-layout-gap, 4px);
    width: 100%;
    overflow: hidden;
}

.mz-pswp5--gallery-masonry .mz-pswp5__thumb {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    border-radius: var(--pswp5-radius);
}

.mz-pswp5--gallery-justified .mz-pswp5__thumb,
.mz-pswp5--gallery-masonry .mz-pswp5__thumb {
    box-shadow: none;
}

/* ----------------------------------------------------------
   Gallery-Modus: mosaic

   Desktop:
   - Bild 1 bildet die große Hauptfläche.
   - Bilder 2 bis 5 bilden vier kleinere Kacheln.
   - Weitere Bilder bleiben Bestandteil der Lightbox, sind
     aber in der Vorschau nicht sichtbar.
---------------------------------------------------------- */

.mz-pswp5--mosaic {
    min-width: 0;
    max-width: 100%;
}

/*
 * Das Raster besitzt maximal die konfigurierte Mosaic-Breite
 * und wird innerhalb seines Inhaltsbereichs zentriert.
 *
 * Bei 1000px Gesamtbreite ergibt die Spaltenaufteilung
 * ungefähr:
 *
 * Hauptbild:      500px
 * kleine Kacheln: 250px
 */
.mz-pswp5--mosaic .mz-pswp5__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 2fr)
        minmax(0, 1fr)
        minmax(0, 1fr);

    grid-template-rows:
        repeat(2, minmax(0, 1fr));

    gap: var(--pswp5-mosaic-gap, 4px);

    width: min(100%, var(--pswp5-mosaic-max-width, 1000px));
    max-width: var(--pswp5-mosaic-max-width, 1000px);

    /*
     * Das gesamte Raster bleibt geometrisch stabil.
     * Dadurch füllen Hauptbild und Nebenbilder gemeinsam
     * exakt dieselbe Ober- und Unterkante.
     */
    aspect-ratio: var(--pswp5-mosaic-ratio, 2 / 1);

    margin-inline: auto;

    min-width: 0;
    min-height: 0;
}

/*
 * Jede Figure muss die ihr zugewiesene Grid-Zelle vollständig
 * ausfüllen. min-height:0 verhindert, dass Hochformatbilder
 * die berechnete Zeilenhöhe vergrößern.
 */
.mz-pswp5--mosaic .mz-pswp5__item {
    position: relative;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    margin: 0;
    overflow: hidden;

    aspect-ratio: auto;

    border-radius: var(--pswp5-radius);
    box-shadow: var(--pswp5-shadow);
}

/* Hauptbild links */
.mz-pswp5--mosaic .mz-pswp5__item:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / 3;
}

/* Kleine Kacheln rechts */
.mz-pswp5--mosaic .mz-pswp5__item:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
}

.mz-pswp5--mosaic .mz-pswp5__item:nth-child(3) {
    grid-column: 3;
    grid-row: 1;
}

.mz-pswp5--mosaic .mz-pswp5__item:nth-child(4) {
    grid-column: 2;
    grid-row: 2;
}

.mz-pswp5--mosaic .mz-pswp5__item:nth-child(5) {
    grid-column: 3;
    grid-row: 2;
}

/*
 * Weitere Bilder sind nur in der Lightbox erreichbar.
 * Die Links bleiben vollständig im DOM erhalten.
 */
.mz-pswp5--mosaic .mz-pswp5__item:nth-child(n + 6) {
    display: none;
}

/*
 * Link und Bild füllen die Grid-Zelle vollständig.
 */
.mz-pswp5--mosaic .mz-pswp5__link {
    display: block;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;
}

.mz-pswp5--mosaic .mz-pswp5__thumb {
    display: block;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;
    max-width: none;
    max-height: none;

    /*
     * Alle Bildformate werden auf die feste Mosaic-Kachel
     * zugeschnitten. Dadurch können Hochformatbilder die
     * Zellen nicht mehr vergrößern oder überdecken.
     */
    aspect-ratio: auto;
    object-fit: cover;

    border-radius: 0;
    box-shadow: none;
}

/* Keine Vorschau-Untertitel im geschlossenen Mosaic */
.mz-pswp5--mosaic .mz-pswp5__caption {
    display: none;
}

/* ----------------------------------------------------------
   Mosaic auf schmalen Bildschirmen

   Hauptbild über die volle Breite, darunter vier Bilder in
   zwei Spalten.
---------------------------------------------------------- */

@media (max-width: 700px) {
    .mz-pswp5--mosaic .mz-pswp5__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        grid-template-rows: none;
        grid-auto-rows: auto;

        width: 100%;
        max-width: none;

        /*
         * Das feste Desktop-Gesamtverhältnis wird mobil
         * aufgehoben.
         */
        aspect-ratio: auto;
    }

    .mz-pswp5--mosaic .mz-pswp5__item:nth-child(-n + 5) {
        grid-column: auto;
        grid-row: auto;

        width: 100%;
        height: auto;

        aspect-ratio:
            var(--pswp5-mosaic-mobile-thumb-ratio, 4 / 3);
    }

    .mz-pswp5--mosaic .mz-pswp5__item:nth-child(1) {
        grid-column: 1 / -1;

        aspect-ratio:
            var(--pswp5-mosaic-mobile-main-ratio, 16 / 9);
    }
}

/* ==========================================================
   Modifikator-Klassen
   ----------------------------------------------------------
   Diese Klassen dienen ausschließlich der individuellen
   Gestaltung über den zweiten Plugin-Parameter:

   {PhotoSwipe5|Galerie|Modifikator-Klassen|Modus|Bilddatei}

   Beispiel:
   {PhotoSwipe5|Galerie|pswp5-layout-floatleft|single|}

========================================================== */

/* ----------------------------------------------------------
   Layout
   Positionierung, Größen, Float, Flex/Grid
---------------------------------------------------------- */

.mz-pswp5--single.pswp5-layout-floatleft,
.mz-pswp5--cover.pswp5-layout-floatleft,
.mz-pswp5--lightbox.pswp5-layout-floatleft {
    float: left;
    margin: 0 1.25rem 1rem 0;
}

.mz-pswp5--single.pswp5-layout-floatright,
.mz-pswp5--cover.pswp5-layout-floatright,
.mz-pswp5--lightbox.pswp5-layout-floatright {
    float: right;
    margin: 0 0 1rem 1.25rem;
}

/*
 * Float-Modifikatoren gelten ausschließlich für Einzelbilder.
 * Galerien werden grundsätzlich nicht gefloatet.
 */
.mz-pswp5--gallery.pswp5-layout-floatleft,
.mz-pswp5--gallery.pswp5-layout-floatright {
    float: none;
}

@media (max-width: 768px) {
    .mz-pswp5--single.pswp5-layout-floatleft,
    .mz-pswp5--single.pswp5-layout-floatright,
    .mz-pswp5--cover.pswp5-layout-floatleft,
    .mz-pswp5--cover.pswp5-layout-floatright,
    .mz-pswp5--lightbox.pswp5-layout-floatleft,
    .mz-pswp5--lightbox.pswp5-layout-floatright {
        float: none;
        margin: 0 auto 1rem;
    }
}

/* Einzelbild oder Cover horizontal zentrieren */
.mz-pswp5--single.pswp5-layout-center,
.mz-pswp5--cover.pswp5-layout-center,
.mz-pswp5--lightbox.pswp5-layout-center {
    margin-inline: auto;
}

/* ----------------------------------------------------------
   Frame
   Rahmen, Radius, Schatten
---------------------------------------------------------- */

/* Dünner Rahmen um die Vorschaubilder 
Parameter 2 Name: pswp5-frame-border */
.pswp5-frame-border .mz-pswp5__thumb {
    border: 1px solid rgba(0, 0, 0, 0.25);
}

/* Stärkerer Schatten um die Vorschaubilder 
Parameter 2 Name: pswp5-frame-shadow */
.mz-pswp5--gallery.pswp5-frame-shadow .mz-pswp5__thumb,
.mz-pswp5--single.pswp5-frame-shadow .mz-pswp5__thumb,
.mz-pswp5--lightbox.pswp5-frame-shadow .mz-pswp5__thumb,
.mz-pswp5--cover.pswp5-frame-shadow .mz-pswp5__thumb--cover-visual {
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.24);
}

/* ----------------------------------------------------------
   Theme
   Farben, Hover-Effekte, Animationen
---------------------------------------------------------- */

/* Vorschaubilder auf dunklem Untergrund
Parameter 2: pswp5-theme-dark
*/
.mz-pswp5.pswp5-theme-dark {
    padding: 0.75rem;
    color: #f2f2f2;
    background: #151515;
    border-radius: calc(var(--pswp5-radius) + 0.25rem);
}

.mz-pswp5.pswp5-theme-dark .mz-pswp5__caption {
    color: inherit;
}

/* ----------------------------------------------------------
   Content
   Bilddarstellung, Beschriftungen, Spezialfälle
---------------------------------------------------------- */

/* Untertitel dieser Galerie ausblenden 
Parameter 2: pswp5-content-no-caption
*/
.pswp5-content-no-caption .mz-pswp5__caption {
    display: none;
}
.mz-pswp5--single.pswp5-content-original .mz-pswp5__thumb,
.mz-pswp5--cover.pswp5-content-original .mz-pswp5__thumb--cover-visual {
    aspect-ratio: auto;
    object-fit: contain;
}

/* Vorschaubilder in Graustufen
   Beim Überfahren mit der Maus farbig darstellen
   Parameter 2: pswp5-content-grayscale
*/
.mz-pswp5.pswp5-content-grayscale .mz-pswp5__thumb {
    filter: grayscale(100%);
    transition: filter 0.25s ease;
}

.mz-pswp5.pswp5-content-grayscale .mz-pswp5__thumb:hover {
    filter: none;
}

/* Hochformat-Vorschaubilder in der Standardgalerie */
.mz-pswp5--gallery.pswp5-content-portrait {
    --pswp5-thumb-ratio: 3 / 4;
}