/* Nur unsere Galerie-Bildlinks beeinflussen, nicht Logo/Navigation. */
a[data-lightbox] { cursor: zoom-in; }
/* Die Uebersicht zeigt einen quadratischen, mittigen Bildausschnitt.
   cover fuellt die Vorschau proportional; keine kuenstlichen freien Raender.
   Nur die Vorschau wird beschnitten, die Lightbox darunter bleibt bei contain. */
#ausstellungsbilder { --gh-preview-size: 180px; }
#ausstellungsbilder a.gh-preview-link {
    position: relative;
    display: inline-block;
    vertical-align: top;
}
#ausstellungsbilder img.gh-preview {
    display: block;
    width: var(--gh-preview-size);
    height: var(--gh-preview-size);
    min-width: 0;
    min-height: 0;
    max-width: none;
    max-height: none;
    box-sizing: content-box;
    padding: 0;
    object-fit: cover;
    object-position: center;
}
#ausstellungsbilder .gh-preview-message {
    position: absolute;
    inset: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin: 0;
    padding: 8px;
    background: rgba(255, 255, 255, 0.95);
    color: #333;
    font: 12px/1.4 Arial, Helvetica, sans-serif;
    text-align: center;
    overflow-wrap: anywhere;
}
/* Auf schmalen Inhaltsframes werden nur die Vorschauboxen kleiner.
   Die bestehende Tabellenstruktur bleibt unveraendert. */
@media (max-width: 650px) {
    #ausstellungsbilder {
        --gh-preview-size: clamp(56px, calc((100vw - 112px) / 3), 180px);
    }
}

/* Die alte Seite soll hinter dem geoeffneten Dialog nicht weiterscrollen. */
html.gh-lightbox-open, html.gh-lightbox-open body {
    overflow: hidden !important;
}

/* Ein Dialog fuellt das aktuelle Fenster bzw. den aktuellen Inhaltsframe. */
#gh-lightbox {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 16px;
    border: 0;
    box-sizing: border-box;
    overflow: hidden;
    color: #fff;
    background: transparent;
    font: 16px/1.4 Arial, Helvetica, sans-serif;
}
#gh-lightbox:not([open]) { display: none; }
#gh-lightbox[open] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
#gh-lightbox::backdrop { background: rgba(0, 0, 0, 0.9); }
#gh-lightbox *, #gh-lightbox *::before, #gh-lightbox *::after {
    box-sizing: border-box;
}
#gh-lightbox [hidden] { display: none !important; }

#gh-lightbox .gh-toolbar,
#gh-lightbox .gh-navigation {
    display: flex;
    align-items: center;
    gap: 8px;
}
#gh-lightbox .gh-toolbar {
    flex: 0 0 auto;
    justify-content: space-between;
}
#gh-lightbox button {
    display: inline-block;
    min-width: 44px;
    min-height: 44px;
    width: auto;
    height: auto;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid #aaa;
    border-radius: 4px;
    color: #fff;
    background: #222;
    font: inherit;
    text-align: center;
    cursor: pointer;
}
#gh-lightbox button:disabled { opacity: 0.4; cursor: default; }
#gh-lightbox button:focus-visible,
#gh-lightbox a:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}
#gh-lightbox .gh-counter { min-width: 58px; text-align: center; }

/* Toolbar und Beschriftung bekommen Platz, das Bild den verbleibenden Rest. */
#gh-lightbox .gh-stage {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
}

/* Das Bildelement fuellt die Buehne; object-fit:contain passt den INHALT
   proportional hinein. Auch kleine Dateien werden jetzt vergroessert.
   Weder Zuschneiden (cover) noch Verzerren (fill), keine feste Mindestgroesse.
   Mindestens eine Bildachse nutzt die ganze verfuegbare Breite oder Hoehe. */
#gh-lightbox .gh-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    object-fit: contain;
    object-position: center;
}
#gh-lightbox .gh-status {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 12px;
    color: #fff;
    text-align: center;
    overflow: auto;
}
#gh-lightbox .gh-footer { flex: 0 0 auto; text-align: center; }
#gh-lightbox .gh-caption {
    max-height: 3em;
    margin: 0 0 4px;
    overflow: auto;
    overflow-wrap: anywhere;
    color: #fff;
    font: inherit;
}
#gh-lightbox .gh-original {
    color: #fff;
    font: 14px/1.4 Arial, Helvetica, sans-serif;
    text-decoration: underline;
}
@media (max-width: 420px), (max-height: 400px) {
    #gh-lightbox { padding: 8px; }
    #gh-lightbox[open] { gap: 6px; }
    #gh-lightbox button { padding: 6px 8px; }
}