/*
    Das Galerieraster unter /fotoalbum/{slug} (Entscheidung vom 10.09.2026).

    Zeilen gleicher Höhe. flex-wrap füllt zeilenweise, flex-grow lässt die
    letzte Zeile nicht auseinanderfallen. Die vier Klassen setzen die
    Grundbreite nach Seitenverhältnis – gerechnet wird nichts im Browser,
    weil style-src 'self' kein Inline-Attribut zulässt.

    Die vier Namen stammen aus Bildformat.Fuer und sind dort zugleich als
    CSS-Klassen dokumentiert. Wer einen Namen ändert oder einen fünften
    hinzufügt, muss beide Seiten mitziehen: Eine unbekannte Klasse meldet
    CSS nicht, das Bild bekäme schlicht keine Grundbreite.
*/

.galerie {
    display: flex;
    flex-wrap: wrap;
    gap: var(--raum-2);
}

.galerie__bild {
    margin: 0;
}

/*
    Faengt die Schlusszeile ab. Ohne diesen Platzhalter zieht flex-grow ein
    einzelnes letztes Bild auf die volle Breite der Zeile - bei einem Album
    mit sieben Bildern stand das siebte mit 1200 Pixeln da, dreimal so gross
    wie jedes andere. Der Platzhalter ist selbst das letzte Flex-Element und
    schluckt den Rest der Zeile. Ist die Schlusszeile ohnehin voll, ruecht er
    auf eine eigene Zeile ohne Hoehe und faellt nicht auf.
*/
.galerie::after {
    content: "";
    flex-grow: 1000;
}

.galerie__bild img {
    display: block;
    width: 100%;
    height: auto;
}

/*
    flex-grow UND flex-basis proportional zum Seitenverhaeltnis der Klasse.
    Nur dann ist die Breite jedes Bildes zu seinem Verhaeltnis proportional -
    und erst daraus folgt, dass die Hoehen einer Zeile zusammenfallen:
    Hoehe = Breite / Verhaeltnis, und wenn Breite ~ Verhaeltnis gilt, kuerzt
    sich das Verhaeltnis heraus.

    Waere nur flex-basis proportional und flex-grow ueberall 1, verteilte
    sich der freie Platz zu gleichen Teilen statt anteilig, und die Hoehen
    liefen wieder auseinander - so stand es bis zum 12.09.2026 hier.

    "Zeilen gleicher Hoehe" gilt dabei nur bis zur Koernung der vier Klassen:
    Ein Bild mit 0,79 und eines mit 0,64 sind beide "hoch" und bekommen
    dieselbe Breite, unterscheiden sich in der Hoehe aber um ein Viertel.
    Genauer ginge es nur mit mehr Klassen in Bildformat.Fuer - ein gerechnetes
    Verhaeltnis je Bild verlangte ein style-Attribut, und style-src 'self'
    laesst das nicht zu.
*/
.galerie__bild--hoch     { flex: 75 0 15rem; }
.galerie__bild--quadrat  { flex: 110 0 22rem; }
.galerie__bild--quer     { flex: 160 0 32rem; }
.galerie__bild--panorama { flex: 260 0 52rem; }

.galerie__unterschrift {
    display: flex;
    flex-direction: column;
    font-size: var(--groesse-klein);
    color: var(--farbe-text-leise);
    padding-block-start: var(--raum-1);
}

/* Die Bildunterschrift ist Inhalt – von der Redaktion geschrieben und nicht
   jedes Bild hat eine. Sie liest sich deshalb in der Textfarbe und hebt sich
   von der Herkunftsangabe darunter ab. Ohne diese Regel sähen beide gleich
   aus, und die Unterschrift verschwände in der Fußnote. */
.galerie__text {
    color: var(--farbe-text);
}

/* Der Fotograf ist Herkunftsangabe, nicht Inhalt. Er bleibt leise – aber
   sichtbar: Konzept 6.3 macht ihn zur Pflicht, WEIL er dokumentiert. */
.galerie__fotograf {
    font-style: italic;
}

/*
    Der Verweis, der die Großansicht öffnet. display: block, damit das Bild
    nicht auf der Textgrundlinie sitzt und darunter ein Streifen entsteht.
*/
.galerie__oeffnen {
    display: block;
    text-decoration: none;
}

/* Auf dem Telefon eine Spalte - vier Formatklassen nebeneinander ergeben
   bei 400 px Breite nur Briefmarken. */
@media (max-width: 40rem) {
    .galerie__bild { flex-basis: 100%; }
}

/* ----------------------------------------------------------------------
   Die Großansicht über :target – ohne JavaScript (Entscheidung vom
   10.09.2026). Die Bedienung bleibt auf einer Seite, die Zurück-Taste
   schließt, und ein geteilter Verweis öffnet genau dieses Bild.

   Die figure selbst wird bildschirmfüllend; es gibt kein zweites Bild.
   Warum, steht ausführlich in FotoalbumGalerie.razor – kurz: Ein Bild mit
   loading="lazy" in einem verborgenen Vorfahren lädt Chrome nie nach, und
   ein nicht träges Zweitbild je Foto hieße, bei sechzig Fotos sechzig
   große Bilder beim Seitenaufruf zu laden.
   ---------------------------------------------------------------------- */

/* Nur ein Sprungziel zum Schließen. Ohne eigene Höhe, damit es im Raster
   nichts verschiebt. */
.galerie__anker {
    display: block;
    height: 0;
}

.galerie__bild:target {
    position: fixed;
    inset: 0;
    z-index: 100;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--raum-1);

    background: rgb(0 0 0 / 0.92);
    padding: var(--raum-2);
    overflow-y: auto;
}

/*
    Geöffnet soll das Bild den Schirm ausnutzen. height: 80vh und nicht
    height: auto - mit auto bliebe es bei seiner natürlichen Größe stehen
    und säße als kleines Rechteck mitten auf schwarzem Grund. max-width
    fängt die Querformate ab, damit nichts seitlich hinauswächst.

    Preis: Die Kachel lädt nach ihrem sizes-Wert die 800er Fassung, und
    bildschirmfüllend wird die hochskaliert - sichtbar weicher. Das ist die
    bewusst gewählte Seite des Tauschs (Entscheidung vom 12.09.2026): ein
    img je Foto statt zwei, dafür keine sechzig großen Bilder beim
    Seitenaufruf. Wer es schärfer will, hebt sizes im Raster an - das kostet
    dort Bytes, hier nichts.
*/
.galerie__bild:target img {
    width: auto;
    height: 80vh;
    max-width: 100%;

    /*
        object-fit: contain ist hier kein Beiwerk, sondern die Bedingung
        dafür, dass die Zeile darüber überhaupt tragen darf.

        height: 80vh ist ein fester Wert, width: auto rechnet die Breite aus
        dem Seitenverhältnis – und max-width: 100% kappt diese Breite dann,
        ohne die Höhe mitzuziehen. Auf einem schmalen Schirm wurde ein
        Hochformat dadurch in die Länge gezogen: 1618x2544 erschien bei
        400 px als 353x688, also im Verhältnis 1,95 statt 1,57. Am laufenden
        System gemessen, Prüfpunkt F 12.

        Mit contain bleibt die Box bei 80vh und das Bild wird darin
        unverzerrt eingepasst. Der Rand, der dabei frei bleibt, ist schwarz
        wie der Grund und fällt nicht auf.
    */
    object-fit: contain;
}

.galerie__bild:target .galerie__unterschrift {
    color: #fff;
    text-align: center;
}

/*
    .galerie__text trägt für das Raster die dunkle Textfarbe. Geöffnet liegt
    derselbe Text auf fast schwarzem Grund – ohne diese Zeile wäre er
    unlesbar. Geerbt statt neu gesetzt, damit es eine Farbe bleibt.
*/
.galerie__bild:target .galerie__text { color: inherit; }

/*
    Der Schließen-Verweis gehört zur geöffneten Ansicht. Geschlossen ist er
    display: none und damit zugleich aus der Tabulatorfolge und aus dem
    Bildschirmleser – sonst lägen bei sechzig Fotos sechzig
    Schließen-Verweise im Weg, die auf nichts Sichtbares zeigen.
*/
.galerie__schliessen { display: none; }

.galerie__bild:target .galerie__schliessen {
    display: block;
    position: absolute;
    top: var(--raum-2);
    right: var(--raum-2);
    color: #fff;
}

/*
    Der globale Fokusring aus base.css ist Waldgrün mit Gold darum. Das
    Waldgrün verschwindet auf dem fast schwarzen Grund; WCAG 1.4.11 verlangt
    3:1 gegen die Umgebung. Weiß trägt hier 21:1.
*/
.galerie__bild:target :focus-visible { outline-color: #fff; }

/*
    Wer keine Bewegung möchte, bekommt keine. prefers-reduced-motion ist
    kein Beiwerk: Ein Overlay, das aufblendet, ist für manche Menschen ein
    Problem.
*/
@media (prefers-reduced-motion: no-preference) {
    .galerie__bild:target { animation: einblenden 0.15s ease-out; }

    @keyframes einblenden {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
}