/* grav-piwigo: gallery frontend styles (theme-neutral, works on quark/hoerste-base) */

/* Kompaktere Ueberschriften als der Quark-Standard: die Galerie soll
   Inhalt zeigen, nicht Titel. */
.piwigo h1 {
    font-size: 1.6rem;
    line-height: 1.25;
    margin: 0.25rem 0 0.75rem;
}
.piwigo h2 {
    font-size: 1.2rem;
    line-height: 1.25;
    margin: 1.25rem 0 0.5rem;
}

/* Lange Wortungetueme umbrechen - Bildtitel enthalten schon mal eine
   eingedampfte Quellenangabe ("httpscommons.wikimedia.orgwindex.phpcurid=…"),
   und in Beschreibungen stehen volle URLs. Bricht das nicht, wird die Seite
   breiter als das Display; Handybrowser zoomen daraufhin die GANZE Seite
   heraus (aus 390 px Fensterbreite werden dann z. B. 681 px), und alles wirkt
   verschoben und zu klein. Die Kacheln machen das laengst so. */
.piwigo h1,
.piwigo-breadcrumb,
.piwigo-comment,
.piwigo-vollbild-titel,
.piwigo-vollbild-text {
    overflow-wrap: anywhere;
}

.piwigo-breadcrumb { margin: 0.25rem 0 0.5rem; font-size: 0.9em; opacity: 0.8; }
.piwigo-breadcrumb a { text-decoration: none; }

.piwigo-error {
    padding: 1rem;
    border: 1px solid rgba(200, 80, 80, 0.5);
    border-radius: 6px;
    background: rgba(200, 80, 80, 0.08);
    margin: 1rem 0;
}

/* Album cards */
.piwigo-albums {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}
.piwigo-album-card {
    display: block;
    border: 1px solid rgba(128, 128, 128, 0.25);
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow 0.15s ease;
}
.piwigo-album-card:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); }
/* Albumkarten sind Stimmungsbilder, kein Inhalt - hier bleibt der
   formatfuellende Zuschnitt, damit die Uebersicht ruhig wirkt. */
.piwigo-album-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}
.piwigo-album-name { display: block; padding: 0.5rem 0.75rem 0; font-weight: 600; }
.piwigo-album-count { display: block; padding: 0 0.75rem 0.6rem; font-size: 0.85em; opacity: 0.7; }

/* Einleitung: der Aufklapp-Knopf ist eine Bedienflaeche, kein Fliesstext. */
.piwigo-intro > summary {
    cursor: pointer;
    font-weight: 600;
    padding: 0.35rem 0;
    touch-action: manipulation;
    /* Wie eine Zwischenueberschrift: Zugeklappt ist diese Zeile alles, was
       vom Willkommen zu sehen ist, und sie steht ueber allem anderen auf der
       Seite. In Fliesstextgroesse las sie sich wie eine Randnotiz. */
    font-size: 1.2rem;
    line-height: 1.25;
}

/* Image grid */
.piwigo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
    margin: 1rem 0 1.5rem;
}
.piwigo-card {
    display: block;
    text-decoration: none;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(128, 128, 128, 0.2);
}
/* Nicht beschneiden: Ein grosser Teil des Bestandes sind Dokumente -
   Zeitungsausschnitte, Briefe, Hochformat-Scans. Auf 4:3 zugeschnitten
   verlieren die genau den Kopf, an dem man sie erkennt. Das Seitenverhaeltnis
   bleibt als reservierter Platz erhalten (kein Layout-Sprung), das Bild wird
   darin vollstaendig eingepasst. */
.piwigo-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: rgba(128, 128, 128, 0.08);
    display: block;
    transition: transform 0.15s ease;
}
.piwigo-card:hover img { transform: scale(1.03); }
.piwigo-card span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    padding: 0.35rem 0.5rem;
    font-size: 0.85em;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* Single picture */
.piwigo-picture { margin: 1rem 0; }
.piwigo-picture img { max-width: 100%; height: auto; border-radius: 6px; }
.piwigo-comment { margin: 1rem 0; max-width: 60rem; }
.piwigo-author { font-size: 0.9em; opacity: 0.75; }
.piwigo-tags a {
    display: inline-block;
    margin: 0 0.4rem 0.4rem 0;
    padding: 0.15rem 0.6rem;
    border: 1px solid rgba(128, 128, 128, 0.35);
    border-radius: 999px;
    font-size: 0.85em;
    text-decoration: none;
}
.piwigo-prevnext {
    display: flex;
    justify-content: flex-start;
    gap: 0.75rem;
    margin: 1.5rem 0;
}
.piwigo-prevnext a {
    padding: 0.3rem 0.9rem;
    border: 1px solid rgba(128, 128, 128, 0.35);
    border-radius: 999px;
    text-decoration: none;
    max-width: 45%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.piwigo-prevnext a:hover { border-color: currentColor; }

/* Tag cloud (heatmap) */
.piwigo-cloud { line-height: 2.1; margin: 1rem 0; }
/* Groesse nach Haeufigkeit. Die Rechnung stand frueher als fertige em-Zahl
   im style-Attribut; die Vorlage liefert jetzt nur noch das Gewicht (0 bis 1)
   und die Spanne steht hier. Inline-Styles liessen sich sonst nur mit
   !important uebersteuern, und je Geraet anders spannen liesse sie sich gar
   nicht. */
.piwigo-cloud a {
    margin-right: 0.75rem;
    text-decoration: none;
    white-space: nowrap;
    font-size: calc((0.85 + 1.15 * var(--gewicht, 0)) * 1em);
}
.piwigo-cloud a:hover { text-decoration: underline; }

/* Pagination */
.piwigo-pagination { margin: 1.5rem 0; }
.piwigo-pagination a,
.piwigo-pagination .current {
    display: inline-block;
    min-width: 2rem;
    text-align: center;
    padding: 0.25rem 0.4rem;
    margin-right: 0.25rem;
    border: 1px solid rgba(128, 128, 128, 0.3);
    border-radius: 4px;
    text-decoration: none;
}
.piwigo-pagination .current { font-weight: 700; border-color: currentColor; }

/* Bildgroessen-Steuerung der Einzelbild-Ansicht (assets/gallery.js) */
.piwigo-zoom {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.75rem 0 0.5rem;
    font-size: 0.85em;
}
.piwigo-zoom button {
    min-width: 2rem;
    padding: 0.2rem 0.6rem;
    border: 1px solid rgba(128, 128, 128, 0.45);
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.piwigo-zoom button:hover { border-color: currentColor; }
.piwigo-zoom-wert { min-width: 3em; text-align: center; }
.piwigo-zoom-hinweis { margin-left: 0.6rem; opacity: 0.6; }

/* Sprungknoepfe im Pfad: Haus (Archiv) links, Pfeil hoch (Ebene hoch) rechts.
   Gruen kommt aus der Site, mit Rueckfallwert fuer Instanzen ohne die Variable. */
/* Die Site faerbt Links in der Galerie gruen (.piwigo a, hoehere Spezifitaet
   als eine einzelne Klasse) - deshalb hier ebenfalls mit a.<klasse> ansetzen,
   sonst erbt das Icon die Linkfarbe statt Weiss zu bleiben. */
.piwigo-navbtn,
.piwigo a.piwigo-navbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 5px;
    background: var(--leben-green, #2f6b3a);
    color: #fff;
    text-decoration: none;
    vertical-align: -0.35em;
}
.piwigo-navbtn:hover,
.piwigo-navbtn:focus,
.piwigo a.piwigo-navbtn:hover,
.piwigo a.piwigo-navbtn:focus,
.piwigo a.piwigo-navbtn:focus-visible {
    background: var(--leben-green-dark, #276238);
    color: #fff;
}
.piwigo-navbtn svg { display: block; }

/* Hinweisstreifen des Redakteurmodus (assets/redakteur.js).
   Weiss auf Gruen; die Links werden von der Site gruen eingefaerbt
   (.piwigo a), deshalb hier ebenfalls mit a.<klasse> dagegenhalten. */
.piwigo-redakteur {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1rem;
    padding: 0.45rem 0.5rem 0.45rem 0.9rem;
    border-radius: 6px;
    background: var(--leben-green, #2f6b3a);
    color: #fff;
    font-size: 0.85em;
}
.piwigo-redakteur-status { color: #fff; opacity: 0.75; }
.piwigo-redakteur-status.ist-frisch {
    opacity: 1;
    font-weight: 600;
}

/* Schaltflaechen im Streifen: der Ausschalter sitzt rechts aussen. */
.piwigo-redakteur-aus,
.piwigo a.piwigo-redakteur-aus,
.piwigo-redakteur-neu {
    margin-left: auto;
    padding: 0.2rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 1em;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.piwigo-redakteur-aus:hover,
.piwigo a.piwigo-redakteur-aus:hover,
.piwigo a.piwigo-redakteur-aus:focus,
.piwigo a.piwigo-redakteur-aus:focus-visible,
.piwigo-redakteur-neu:hover,
.piwigo-redakteur-neu:focus {
    background: #fff;
    color: var(--leben-green-dark, #276238);
}

/* Erscheint der Neu-laden-Knopf, rutscht der Ausschalter wieder mit nach
   rechts - nur der erste der beiden bekommt den Abstand davor. */
.piwigo-redakteur-neu ~ .piwigo-redakteur-aus,
.piwigo a.piwigo-redakteur-neu ~ .piwigo-redakteur-aus { margin-left: 0; }

/* Suche */
.piwigo-suche {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin: 1rem 0 1.5rem;
}
.piwigo-suche-label {
    flex: 0 0 100%;
    font-size: 0.85em;
    opacity: 0.75;
}
.piwigo-suche input[type="search"] {
    flex: 1 1 18rem;
    max-width: 28rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid rgba(128, 128, 128, 0.45);
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font: inherit;
}
.piwigo-suche button {
    padding: 0.4rem 1.1rem;
    border: 0;
    border-radius: 6px;
    background: var(--leben-green, #2f6b3a);
    color: #fff;
    font: inherit;
    cursor: pointer;
}
.piwigo-suche button:hover { background: var(--leben-green-dark, #276238); }
/* Bildnummer klein hinter dem Titel - am rechten Rand der Blaetter-Leiste
   uebersah man sie auf breiten Bildschirmen. */
.piwigo-position {
    margin-left: 0.4rem;
    font-size: 0.55em;
    font-weight: 400;
    opacity: 0.6;
    white-space: nowrap;
}

/* Sprungziel nicht direkt an den Fensterrand kleben lassen und beim
   Zuruecksuchen kurz hervorheben. */
.piwigo-card { scroll-margin-top: 5rem; }
/* Zuletzt angesehenes Bild: ueber die Sprungmarke (:target) und - wer mit dem
   Zurueck-Knopf kommt, hat keine - ueber die Klasse aus gallery.js. */
.piwigo-card:target,
.piwigo-card.ist-ziel {
    outline: 3px solid var(--leben-green, #2f6b3a);
    outline-offset: 2px;
}
.piwigo-card:target span:not(.piwigo-card-nr),
.piwigo-card.ist-ziel span:not(.piwigo-card-nr) {
    background: var(--leben-green, #2f6b3a);
    color: #fff;
}

/* Blaetterflaechen ueber den Bildraendern (Template picture.html.twig).
   Je ein Viertel links und rechts; die Mitte bleibt dem Original-Link. */
.piwigo-picture { position: relative; display: inline-block; }
.piwigo-blaettern {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 2.5rem;
    line-height: 1;
    color: #fff;
}
.piwigo-blaettern.zurueck { left: 0; justify-content: flex-start; }
.piwigo-blaettern.vor { right: 0; justify-content: flex-end; }
.piwigo-blaettern span {
    padding: 0.1em 0.35em 0.2em;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
}
/* Die Site faerbt .piwigo a (und :hover) gruen und unterstreicht - beides mit
   hoeherer Spezifitaet als eine einzelne Klasse. Deshalb hier durchgaengig
   mit a.<klasse> dagegenhalten, sonst wird der Pfeil beim Ueberfahren gruen. */
.piwigo-blaettern,
.piwigo a.piwigo-blaettern { color: #fff; text-decoration: none; }
.piwigo-blaettern:hover,
.piwigo-blaettern:focus-visible,
.piwigo a.piwigo-blaettern:hover,
.piwigo a.piwigo-blaettern:focus,
.piwigo a.piwigo-blaettern:focus-visible {
    color: #fff;
    text-decoration: none;
}
.piwigo-suche-alle,
.piwigo a.piwigo-suche-alle {
    padding: 0.4rem 1.1rem;
    border: 1px solid var(--leben-green, #2f6b3a);
    border-radius: 6px;
    color: var(--leben-green-dark, #276238);
    text-decoration: none;
    font-size: 0.95em;
}
.piwigo-suche-alle:hover,
.piwigo a.piwigo-suche-alle:hover,
.piwigo a.piwigo-suche-alle:focus-visible {
    background: var(--leben-green, #2f6b3a);
    color: #fff;
    text-decoration: none;
}

/* Auswahl "pro Seite" */
.piwigo-proseite { margin-left: 0.75rem; font-size: 0.9em; opacity: 0.85; }
.piwigo-proseite a,
.piwigo .piwigo-proseite a { margin: 0 0.15rem; }
.piwigo-proseite .current {
    margin: 0 0.15rem;
    font-weight: 700;
    text-decoration: underline;
}

/* ===== Schmale Bildschirme ===== */
@media (max-width: 600px) {
    /* Suchfeld ueber die volle Breite, die Knoepfe darunter - nebeneinander
       bliebe fuer das Eingabefeld kaum Platz. */
    .piwigo-suche input[type="search"] {
        flex: 1 1 100%;
        max-width: none;
    }

    /* Zaehler ueber die Blaetter-Knoepfe statt rechts daneben: dort landete er
       sonst allein in einer Zeile am rechten Rand. */
    .piwigo-prevnext { flex-wrap: wrap; }
    .piwigo-prevnext a { max-width: 100%; }

    /* Blaetterflaechen etwas schmaler, damit in der Mitte genug Platz bleibt,
       um das Original zu oeffnen. */
    .piwigo-blaettern { width: 20%; font-size: 2rem; }
}

/* ===== Vollbild-Overlay (assets/vollbild.js) ===== */
body.piwigo-vollbild-offen { overflow: hidden; }

.piwigo-vollbild {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Unten mehr Luft: dort liegt die Leiste ueber dem Bild und schnitte
       sonst den unteren Rand grosser Bilder ab. Ihre Hoehe haengt vom Titel
       ab, deshalb misst vollbild.js sie und legt sie hier ab; der Wert in
       var() greift nur, solange nicht gemessen wurde (kein JavaScript). */
    padding: 1rem 1rem calc(var(--vollbild-leiste, 3.2rem) + 0.5rem);
    background: rgba(0, 0, 0, 0.92);
}

/* Bei eingeblendetem Text gehoert der untere Rand dem Textfeld. Ohne diesen
   Platzhalter zentriert der Flex-Container das Bild weiterhin im ganzen
   Fenster - auf hohen, schmalen Displays (Handy hochkant) landet es dann in
   der unteren Haelfte und verschwindet hinter dem Text. Reserviert wird die
   gemessene Hoehe des Textfeldes, nicht dessen Maximum: sonst stuenden bei
   drei Zeilen Text genauso viele Pixel leer wie bei dreissig. Im
   vergroesserten Zustand gilt das ebenso, seit dort margin:auto zentriert:
   die Reserve bestimmt, wo die Mitte liegt. Erreichbar bleibt trotzdem jeder
   Bildteil, denn Innenabstand wird mitgescrollt. */
.piwigo-vollbild.zeigt-text {
    padding-bottom: calc(var(--vollbild-text, 45vh) + 0.5rem);
}
.piwigo-vollbild[hidden] { display: none; }
.piwigo-vollbild img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.piwigo-vollbild-leiste {
    /* fixed statt absolute: im vergroesserten Zustand scrollt das Overlay, und
       absolut Positioniertes wanderte mit dem Bild aus dem Blick. Das Overlay
       selbst liegt fest ueber dem Fenster, fixed deckt sich also mit seiner
       Flaeche. */
    position: fixed;
    z-index: 4;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    padding: 0.6rem 1rem;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 0.85em;
}
.piwigo-vollbild-titel { font-weight: 600; }
.piwigo-vollbild-groesse { opacity: 0.75; }

.piwigo-vollbild-zu {
    position: fixed;
    z-index: 5;
    top: 0.6rem;
    right: 0.8rem;
    width: 2.4rem;
    height: 2.4rem;
    border: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font: inherit;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}
.piwigo-vollbild-zu:hover,
.piwigo-vollbild-zu:focus-visible { background: rgba(255, 255, 255, 0.25); }

/* Originalgroesse: Bild darf ueber den Bildschirm hinausragen und wird
   gescrollt - so laesst sich der Text auf Dokumentenscans lesen. */
.piwigo-vollbild.ist-gezoomt {
    overflow: auto;
    user-select: none;
    align-items: flex-start;
    justify-content: flex-start;
    cursor: zoom-out;
}
.piwigo-vollbild.ist-gezoomt img {
    max-width: none;
    max-height: none;
    width: auto;
    height: auto;
    /* Zentriert die Achse, in der das Bild kleiner ist als das Fenster, und
       loest sich in der anderen zu Null auf. Anders als justify-content und
       align-items, die den ueberstehenden Anfang unerreichbar abschneiden -
       deshalb steht oben flex-start. Auf der hochkanten Stele trifft das
       jedes Querformat: ein 851 px hohes Panorama klebte in einem 1920 px
       hohen Fenster oben, darunter ein halber Meter Schwarz. */
    margin: auto;
}
.piwigo-vollbild img { cursor: zoom-in; }

/* Vergroessert wird geschoben statt geklickt - der Zeiger sagt das an. Das
   Umschalten zurueck geschieht weiterhin per Klick ohne Bewegung. */
.piwigo-vollbild.ist-gezoomt img { cursor: grab; }
.piwigo-vollbild.zieht,
.piwigo-vollbild.zieht img { cursor: grabbing; }

/* Blaettern und Text im Vollbild */
.piwigo-vollbild-blaettern {
    position: fixed;
    z-index: 2;
    top: 0;
    bottom: 0;
    width: 22%;
    display: flex;
    align-items: center;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 2.5rem;
    line-height: 1;
    cursor: pointer;
}
.piwigo-vollbild-blaettern[hidden] { display: none; }
.piwigo-vollbild-zurueck { left: 0; justify-content: flex-start; padding-left: 0.5rem; }
.piwigo-vollbild-vor { right: 0; justify-content: flex-end; padding-right: 0.5rem; }
.piwigo-vollbild-blaettern span {
    padding: 0.1em 0.35em 0.2em;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.5);
}
/* Rueckmeldung ueber die Scheibe hinter dem Pfeil statt ueber seine
   Deckkraft - der Pfeil selbst bleibt immer voll weiss. */
.piwigo-blaettern:hover span,
.piwigo-blaettern:focus-visible span,
.piwigo-vollbild-blaettern:hover span,
.piwigo-vollbild-blaettern:focus-visible span { background: rgba(0, 0, 0, 0.7); }

/* Im vergroesserten Zustand wuerden die Flaechen das Schieben behindern. */
.piwigo-vollbild.ist-gezoomt .piwigo-vollbild-blaettern { display: none; }

/* Bei eingeblendetem Text oberhalb davon enden - so bleibt der Text auch
   ausserhalb der Stapelreihenfolge frei bedienbar. Gemessene Hoehe statt
   45vh, sonst sitzen die Pfeile nicht mehr auf Bildhoehe: auf einem 2160 px
   hohen Display waeren 45vh fast tausend Pixel Abzug, der Pfeil landete weit
   oberhalb des Bildes. */
.piwigo-vollbild.zeigt-text .piwigo-vollbild-blaettern {
    bottom: var(--vollbild-text, 45vh);
}

.piwigo-vollbild-textknopf {
    padding: 0.15rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 0.95em;
    cursor: pointer;
}
.piwigo-vollbild-textknopf[aria-pressed="true"] { background: #fff; color: #111; }
.piwigo-vollbild-textknopf[hidden] { display: none; }

/* Bildnummer zwischen Textknopf und Titel - dort liest man sie zusammen mit
   dem Titel, statt sie am anderen Ende der Leiste suchen zu muessen. */
.piwigo-vollbild-position { opacity: 0.75; white-space: nowrap; }

/* Textfeld: erst auf Knopfdruck, sonst verdeckt es dauerhaft das Bild. */
.piwigo-vollbild-text {
    position: fixed;
    /* Ueber den Blaetterflaechen (2): die reichen ueber die volle Fensterhoehe
       und wuerden sonst die linken 22 % des Textfeldes abdecken - Klicks auf
       den Vorlesen-Knopf landeten dann beim vorherigen Bild. */
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    max-height: 45vh;
    overflow-y: auto;
    margin: 0;
    /* Unten so viel Luft, dass die letzte Zeile nicht unter der Leiste
       verschwindet - bei langen Titeln wird die zweizeilig, deshalb die
       gemessene Hoehe statt eines festen Werts. Oben ein weicher Verlauf
       statt einer harten Kante. */
    padding: 1rem 1rem calc(var(--vollbild-leiste, 3.6rem) + 0.6rem);
    background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.85) 3rem);
    color: #fff;
    font-size: 0.9em;
    line-height: 1.5;
}
.piwigo-vollbild.zeigt-text .piwigo-vollbild-text { display: block; }
.piwigo-vollbild-comment { margin: 0; }
/* Die Vorlesen-Leiste steht ueber dem Text und bleibt beim Scrollen im Feld
   sichtbar - sonst muesste man erst ans Textende scrollen, um sie zu finden. */
.piwigo-vollbild-text .vorlesen-wrapper {
    position: sticky;
    top: 0;
    margin: 0 0 0.75rem;
    padding-bottom: 0.4rem;
    background: rgba(0, 0, 0, 0.85);
}

/* Herkunftsstreifen: aus welcher Liste das Bild aufgerufen wurde */
.piwigo-herkunft {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.9rem;
    margin: 0 0 0.75rem;
    padding: 0.4rem 0.8rem;
    border-left: 3px solid var(--leben-green, #2f6b3a);
    background: var(--leben-bg-soft-strong, rgba(128, 128, 128, 0.12));
    font-size: 0.85em;
}
.piwigo-herkunft a,
.piwigo .piwigo-herkunft a { white-space: nowrap; }
.piwigo-vollbild-herkunft { opacity: 0.75; white-space: nowrap; }
.piwigo-vollbild-datei,
.piwigo a.piwigo-vollbild-datei {
    padding: 0.15rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}
.piwigo-vollbild-datei[hidden] { display: none; }
.piwigo a.piwigo-vollbild-datei:hover { background: #fff; color: #111; }

/* Laufende Nummer auf der Kachel */
.piwigo-card { position: relative; }
.piwigo-card-nr {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    padding: 0.1rem 0.45rem;
    border-bottom-right-radius: 6px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.75em;
    line-height: 1.4;
}

/* Dokumentleiste am unteren Bildrand (PDF & Co.).
   Ueber den Blaetterflaechen, sonst faengt deren Klickflaeche den Knopf ab. */
.piwigo-datei {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
    padding: 0.45rem 0.8rem;
    background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.6) 1.5rem);
    color: #fff;
    font-size: 0.85em;
}
/* Gefuellt statt nur umrandet: auf hellen Dokumentenscans ging ein weisser
   Umriss im Bild unter. */
.piwigo-datei a,
.piwigo .piwigo-datei a {
    padding: 0.2rem 0.9rem;
    border: 0;
    border-radius: 999px;
    background: var(--leben-green, #2f6b3a);
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}
.piwigo-datei a:hover,
.piwigo .piwigo-datei a:hover,
.piwigo .piwigo-datei a:focus-visible {
    background: var(--leben-green-dark, #276238);
    color: #fff;
}
.piwigo-datei span { opacity: 0.85; }

/* Kopfzeile der Bildlisten */
.piwigo-listenkopf { margin: 0 0 1rem; }
.piwigo-listenkopf .piwigo-count { margin: 0 0 0.4rem; }
.piwigo-listenkopf .piwigo-pagination { margin: 0; }

/* Verweis von "Neu im Archiv" auf die vollstaendige Liste */
.piwigo-mehr,
.piwigo a.piwigo-mehr {
    margin-left: 0.75rem;
    font-size: 0.65em;
    font-weight: 400;
    white-space: nowrap;
}

/* Auf hochkanten Grossdisplays (Stele) setzt hoerste-base/css/stele.css die
   Wurzelgroesse auf 36 px und daempft die Ueberschriften der Sites von 2rem
   auf 50 px. Die Regeln oben sind spezifischer und wuerden davon nichts
   mitbekommen: 1,6rem waeren dort 58 px, also groesser als auf jeder anderen
   Seite. Uebernommen wird deshalb der Sprung, nicht die Zahl - das Verhaeltnis
   0,8 zum Theme-Standard, das die Galerie auch sonst haelt. */
  html.stele .piwigo h1 { font-size: 40px; }
  html.stele .piwigo h2,
  html.stele .piwigo-intro > summary { font-size: 34px; }

  /* Die Raster waren fuer 15-px-Text bemessen. Bei jetzt rund 24 px Schrift
     in einer 180 px breiten Kachel stehen noch acht Zeichen in der Zeile,
     der Titel laeuft ueber drei Zeilen und wird unter dem Bild
     abgeschnitten. Breitere Kacheln loesen beides zugleich: In je drei
     Spalten bleiben rund 340 px, das traegt die auf 40 Zeichen gekuerzten
     Titel in zwei Zeilen - und eine Kachel dieser Groesse ist auf einem
     traegen Panel ohnehin leichter zu treffen.

     Feste Spaltenzahl statt auto-fill: wie viele Kacheln auto-fill setzt,
     haengt an der Containerbreite, und die schrumpft mit der groesseren
     Schrift, weil die Innenabstaende an rem haengen. Bei minmax(320px)
     kamen deshalb zwei Spalten heraus statt drei, und das Bild wurde zu
     gross. Auf einem Geraet, dessen Masse wir kennen, ist die Zahl selbst
     die ehrlichere Angabe. */
  html.stele .piwigo-grid,
  html.stele .piwigo-albums { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Bildkacheln wie die Albumkarten: derselbe Rand, dieselbe Groesse und
     dasselbe Gewicht, und der Titel darf ueber so viele Zeilen laufen, wie
     er braucht. Die Zeilenbegrenzung stammt aus der Zeit, als eine Kachel
     180 px breit war; bei drei Spalten ist Platz, und Grid gleicht die
     Hoehen einer Reihe ohnehin an. Die laufende Nummer ist ausgenommen -
     sie ist auch ein span, liegt aber frei auf dem Bild. */
  /* Suchfeld ueber die volle Breite, die Knoepfe darunter - wie auf
     schmalen Bildschirmen. Nebeneinander stehen Feld und Knopf hier zwar
     nicht eng, aber das Feld wird dabei so breit, dass der Knopf am anderen
     Ende des halben Meters landet: Wer tippt, muss dann quer ueber die
     Scheibe greifen. */
  html.stele .piwigo-suche input[type="search"] {
      flex: 1 1 100%;
      max-width: none;
  }

  /* Die Spanne der Schlagwortwolke zusammenziehen. Sie ist in em gerechnet
     und waechst deshalb mit: das haeufigste Schlagwort kaeme auf 58 px und
     waere damit groesser als die Ueberschrift der Seite. Ein Schlagwort
     soll nicht lauter rufen als der Text, also endet die Spanne bei rund
     der Fliesstextgroesse. */
  html.stele .piwigo-cloud a { font-size: calc((0.7 + 0.35 * var(--gewicht, 0)) * 1em); }

  html.stele .piwigo-card span:not(.piwigo-card-nr) {
      display: block;
      overflow: visible;
      padding: 0.5rem 0.75rem 0.6rem;
      font-size: 1em;
      font-weight: 600;
  }