/* ----------------------------------------------------------
   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.
     *
     * Single verwendet immer das natürliche Seitenverhältnis
     * des Bildes.
     */
    --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;

    --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 {
    display: none;
}

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

.mz-pswp5--single,
.mz-pswp5--cover {
    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 {
    position: relative;
    width: 100%;
}

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

/*
 * Single:
 * vollständige Darstellung im natürlichen Seitenverhältnis.
 */
.mz-pswp5--single .mz-pswp5__thumb {
    display: block;
    width: 100%;
    height: auto;
}

/*
 * Cover:
 * definierte Fläche, die vollständig mit dem Bild gefüllt wird.
 */
.mz-pswp5--cover .mz-pswp5__thumb,
.mz-pswp5__thumb--cover-visual {
    display: block;
    width: 100%;
    aspect-ratio: var(--pswp5-cover-ratio, 4 / 3);
    object-fit: cover;
}

/* ----------------------------------------------------------
   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;
}

/* ==========================================================
   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 {
    float: left;
    margin: 0 1.25rem 1rem 0;
}

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

.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 {
        float: none;
        margin: 0 auto 1rem;
    }
}

/* Einzelbild oder Cover horizontal zentrieren */
.mz-pswp5--single.pswp5-layout-center,
.mz-pswp5--cover.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--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;
}