/* Bildergalerie, siehe js/lightbox.js. Ersetzt jquery-fullsizable.css und
   dessen Theme-Datei. */

.lightbox {
    border: 0;
    padding: 0;
    max-width: 100vw;
    max-height: 100vh;
    width: 100vw;
    height: 100vh;
    background: rgba(20, 18, 15, .94);
    color: #F2EEE7;
    overflow: hidden;
}
.lightbox::backdrop { background: rgba(20, 18, 15, .8); }

/* Auf- und Abblenden. <dialog> bringt von sich aus keinen Uebergang mit; die
   Klasse lb-offen wird einen Bildaufbau nach showModal() gesetzt, damit der
   Uebergang einen Startwert hat. */
.lightbox { opacity: 0; transition: opacity .18s ease; }
.lightbox.lb-offen { opacity: 1; }

/* Bildwechsel: das neue Bild wird erst geladen und dann eingeblendet
   (siehe js/lightbox.js), damit nicht das vorige stehen bleibt. */
.lb-bild { transition: opacity .22s ease; }
.lightbox.lb-laedt .lb-bild,
.lightbox.lb-frisch .lb-bild { opacity: 0; }

/* Waehrend geladen wird ein ruhiger Hinweis statt eines leeren Rahmens. */
.lightbox.lb-laedt .lb-figur::after {
    content: "";
    position: absolute;
    width: 30px; height: 30px;
    border: 3px solid rgba(242, 238, 231, .3);
    border-top-color: #F2EEE7;
    border-radius: 50%;
    animation: lb-dreht .8s linear infinite;
}
@keyframes lb-dreht { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .lightbox, .lb-bild { transition: none; }
    .lightbox.lb-laedt .lb-figur::after { animation: none; }
}

.lb-figur {
    position: relative;
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 56px 60px;
    box-sizing: border-box;
}
.lb-bild {
    max-width: 100%;
    max-height: calc(100vh - 130px);
    object-fit: contain;
    border-radius: 3px;
}
.lb-text {
    max-width: 60ch;
    text-align: center;
    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    opacity: .92;
}
.lb-zaehler {
    position: absolute;
    left: 0; right: 0; bottom: 10px;
    margin: 0;
    text-align: center;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 12px;
    opacity: .7;
}

/* Bedienknoepfe. Mindestens 44 px, damit sie auch am Handy treffbar sind. */
.lb-zu, .lb-pfeil {
    position: absolute;
    z-index: 2;
    min-width: 48px;
    min-height: 48px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .45);
    color: #F2EEE7;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}
.lb-zu:hover, .lb-pfeil:hover { background: rgba(0, 0, 0, .75); }
.lb-zu:focus-visible, .lb-pfeil:focus-visible { outline: 3px solid #F2EEE7; outline-offset: 2px; }

.lb-zu       { top: 10px; right: 12px; }
.lb-zurueck  { left: 12px;  top: 50%; transform: translateY(-50%); }
.lb-vor      { right: 12px; top: 50%; transform: translateY(-50%); }

/* Die Zeichen stehen im CSS, damit im Markup nichts zu uebersetzen ist -
   der zugaengliche Name kommt aus aria-label. */
.lb-zu::before      { content: "\00d7"; }
.lb-zurueck::before { content: "\2039"; }
.lb-vor::before     { content: "\203a"; }

@media (max-width: 700px) {
    .lb-figur { padding: 56px 12px 44px; }
    .lb-bild { max-height: calc(100vh - 150px); }
    .lb-zurueck { left: 6px; }
    .lb-vor { right: 6px; }
}