/*
 * Die vergroesserte Ansicht (5.10.44), siehe assets/js/lichtbild.js.
 *
 * Der Dialog fuellt das Fenster; die Buehne nimmt alles und zeigt das ganze
 * Bild (object-fit: contain), unbeschnitten. Kein eigenes touch-action, das Zoomen mit
 * zwei Fingern bleibt Sache des Browsers. Logische Eigenschaften, damit eine
 * Seite von rechts nach links ohne eigene Regel stimmt.
 */

.aw-lb {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    background: rgba(14, 12, 24, .94);
    color: #fff;
}

.aw-lb::backdrop {
    background: transparent;
}

.aw-lb:not([open]) {
    display: none;
}

/* Der Rand ersetzt den Scrollbalken, der wegfaellt: dahinter springt nichts. */
html.aw-lb-offen {
    overflow: hidden;
}

html.aw-lb-offen body {
    padding-inline-end: var(--aw-lb-rand, 0);
}

.aw-lb__buehne {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 16px calc(24px + env(safe-area-inset-bottom));
}

.aw-lb__bild {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

.aw-lb__fehler {
    margin: 0;
    color: #fff;
    text-align: center;
}

.aw-lb__zaehler {
    position: absolute;
    inset-block-start: 22px;
    inset-inline-start: 16px;
    z-index: 2;
    margin: 0;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.aw-lb__knopf {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
    background: rgba(14, 12, 24, .55);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.aw-lb__knopf:hover {
    border-color: #fff;
}

.aw-lb__knopf:focus-visible {
    outline: 3px solid #fff !important;
    outline-offset: 2px !important;
}

.aw-lb__knopf[hidden] {
    display: none;
}

.aw-lb__knopf--zu {
    inset-block-start: 10px;
    inset-inline-end: 12px;
}

.aw-lb__knopf--zurueck,
.aw-lb__knopf--vor {
    inset-block-start: calc(50% - 22px);
}

.aw-lb__knopf--zurueck {
    inset-inline-start: 12px;
}

.aw-lb__knopf--vor {
    inset-inline-end: 12px;
}

/* Die Pfeile zeigen in die Leserichtung. */
[dir="rtl"] .aw-lb__knopf--zurueck i,
[dir="rtl"] .aw-lb__knopf--vor i {
    transform: scaleX(-1);
}

@media (prefers-reduced-motion: no-preference) {
    .aw-lb__bild {
        animation: aw-lb-ein .15s ease-out;
    }

    @keyframes aw-lb-ein {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
}

/* Das Profilbild im Kopf ist der Ausloeser, ein Verweis auf die grosse Fassung. */
.user-profile__zoom {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    cursor: zoom-in;
}

.user-profile__zoom:focus-visible {
    outline: 3px solid hsl(var(--base)) !important;
    outline-offset: 3px !important;
}