/* ===================================================================
   „WAS NACH AUSSEN GEHT" — DIE GROSSANSICHT

   Ein Beitrag ist zum Ansehen da. In der Übersicht ist er 300 Pixel
   breit — das reicht, um ihn zu erkennen, nicht um ihn anzusehen.
   Deshalb: Klick öffnet ihn formatfüllend, Pfeiltasten blättern durch
   alle zwölf, Escape schließt.

   Die Großansicht lädt nichts nach: Sie zeigt dieselbe Datei, die in
   der Übersicht schon geladen ist.

   ## Warum die Bilder keinen Ring bekommen

   Sie sind Ziele — nur führen sie nirgendwohin, sie machen sich
   größer. Ihre Antwort ist deshalb dieselbe Handlung im Kleinen: Das
   Bild wächst um vier Prozent, während man darauf zeigt. Das ist eine
   Vorschau auf das, was der Klick tut, und damit ehrlicher als ein
   Ring, der „hier geht es weiter" sagt.
   =================================================================== */

:root[data-thema] .po-gross {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    place-items: center;
    padding: 2rem;
    background: var(--k-schleier);
    backdrop-filter: blur(8px) saturate(1.2);
    -webkit-backdrop-filter: blur(8px) saturate(1.2);
}

:root[data-thema] .po-gross.offen {
    display: grid;
    animation: po-auf var(--bew-schnell) var(--bew-beides);
}

@keyframes po-auf {
    from { opacity: 0; }
    to { opacity: 1; }
}

:root[data-thema] .po-gross__bild {
    max-width: min(92vw, 900px);
    max-height: 82vh;
    border-radius: var(--k-rund-mittel);
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
    object-fit: contain;
}

:root[data-thema] .po-gross__video {
    display: none;
    background: #000;
}

:root[data-thema] .po-post {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--bew-ruhig) var(--bew-beides),
        transform var(--bew-ruhig) var(--bew-feder);
}

:root[data-thema] .po-post.da {
    opacity: 1;
    transform: none;
}

:root[data-thema] .po-main:not(.blendet) .po-post {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    :root[data-thema] .po-post {
        opacity: 1 !important;
        transform: none !important;
        transition: none;
    }
}

:root[data-thema] .po-gross__knopf {
    position: absolute;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-width: 1px;
    border-style: solid;
    border-radius: 50%;
    background: var(--k-menue);
    backdrop-filter: blur(28px) saturate(1.45);
    -webkit-backdrop-filter: blur(28px) saturate(1.45);
    color: var(--k-text-leise);
    font-size: 1rem;
    cursor: pointer;
    transition: color var(--bew-schnell) var(--bew-beides),
        transform var(--bew-ruhig) var(--bew-feder);
}

:root[data-thema] .po-gross__knopf:hover,
:root[data-thema] .po-gross__knopf:focus-visible {
    color: var(--k-text);
    transform: scale(1.06);
}

:root[data-thema] .po-gross__knopf:focus-visible {
    outline: 2px solid var(--k-rand-oben);
    outline-offset: 3px;
}

:root[data-thema] .po-gross__knopf>.fenster__ring,
:root[data-thema] .po-gross__knopf>.fenster__zeichen-pixel {
    position: absolute;
    pointer-events: none;
    max-width: none;
    max-height: none;
}

:root[data-thema] .po-gross__knopf>i.zeichen--zerfaellt::before {
    visibility: hidden;
}

:root[data-thema] .po-gross__zu {
    inset-block-start: 1.5rem;
    inset-inline-end: 1.5rem;
}

:root[data-thema] .po-gross__zurueck {
    inset-inline-start: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
}

:root[data-thema] .po-gross__vor {
    inset-inline-end: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
}

:root[data-thema] .po-gross__zurueck:hover,
:root[data-thema] .po-gross__zurueck:focus-visible,
:root[data-thema] .po-gross__vor:hover,
:root[data-thema] .po-gross__vor:focus-visible {
    transform: translateY(-50%) scale(1.06);
}

:root[data-thema] .po-gross__stand {
    position: absolute;
    inset-block-end: 1.6rem;
    inset-inline: 0;
    color: var(--k-text-still);
    font-size: 0.85rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    text-align: center;
}

:root[data-thema] .po-medium:focus-visible {
    outline: 2px solid var(--k-rand-oben);
    outline-offset: 3px;
}

:root[data-thema] .po-medium:not([data-video]) {
    cursor: zoom-in;
}

:root[data-thema] .po-medium:not([data-video]) img {
    transition: transform var(--bew-ruhig) var(--bew-feder);
}

:root[data-thema] .po-medium:not([data-video]):hover img,
:root[data-thema] .po-medium:not([data-video]):focus-visible img {
    transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
    :root[data-thema] .po-gross.offen,
    :root[data-thema] .po-medium:not([data-video]):hover img {
        animation: none;
        transform: none;
    }
}

@media (max-width: 640px) {
    :root[data-thema] .po-gross {
        padding: 1rem;
    }

    :root[data-thema] .po-gross__knopf {
        width: 40px;
        height: 40px;
    }

    :root[data-thema] .po-gross__zurueck {
        inset-inline-start: 0.6rem;
    }

    :root[data-thema] .po-gross__vor {
        inset-inline-end: 0.6rem;
    }

    :root[data-thema] .po-gross__zu {
        inset-block-start: 0.8rem;
        inset-inline-end: 0.8rem;
    }
}