/**
 * Dateiname: galerie.css
 * Beschreibung: Werke-Galerie (Kategorie-Filter, Mauerwerk-Raster, Lightbox)
 *
 * @version 0.7
 * @date 2026-10-18
 *
 * Änderungshistorie:
 * v0.1 - 2026-10-12 - Initiale PHP-Version (aus HTML-Prototyp)
 * v0.3 - 2026-10-12 - Versionsnummer angehoben, damit Browser nicht die gleichnamige Datei des HTML-Prototyps aus dem Cache laden (0.2 war die letzte Prototyp-Version)
 * v0.4 - 2026-10-12 - Rücklink „Zurück zu den Ausstellungen“ in der Ansicht nach Ausstellung
 * v0.5 - 2026-10-16 - Anfrageformular als Fenster über der Großansicht (.anfrage)
 * v0.6 - 2026-10-16 - Nach dem Versand (.anfrage-gesendet) Eingabefelder und Hinweis ausblenden
 * v0.7 - 2026-10-18 - Galerie zeilenweise: Raster mit --spalten (3/2/1), Höhe je Werk setzt galerie.js (.gallery-raster);
 *                     ohne JavaScript weiter Spalten von oben nach unten
 */

/* ---------- Kategorie-Filter ---------- */
.category-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--space-md); }
.category-nav a {
    padding: 0.5rem 1.1rem;
    border: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    background: var(--paper);
}
.category-nav a:hover { border-color: var(--ink); color: var(--ink); }
.category-nav a.active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.category-nav .count { opacity: 0.6; margin-left: 0.3rem; font-size: 0.8em; }

.gallery-zurueck { font-size: 0.9rem; margin-bottom: var(--space-md); }
.category-intro { color: var(--muted); max-width: 680px; margin-bottom: var(--space-md); min-height: 1.6em; }

/* ---------- Galerie ---------- */
.gallery { --spalten: 3; columns: var(--spalten); column-gap: var(--space-md); }
/* Zeilenweise Reihenfolge (links nach rechts, dann nächste Zeile): galerie.js setzt die Klasse und je Werk die Zahl
   der 4-px-Rasterzeilen (grid-row-end: span …); ohne JavaScript bleibt die Spaltenanordnung oben */
.gallery.gallery-raster {
    display: grid;
    grid-template-columns: repeat(var(--spalten), minmax(0, 1fr));
    grid-auto-rows: 4px;
    align-items: start;
    columns: auto;
}
.work {
    break-inside: avoid;
    margin-bottom: var(--space-lg);
    cursor: zoom-in;
}
.work-frame {
    background: var(--paper);
    padding: 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 10px 24px rgba(0, 0, 0, 0.07);
    transition: transform var(--transition), box-shadow var(--transition);
}
.work:hover .work-frame, .work:focus-visible .work-frame { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 18px 36px rgba(0, 0, 0, 0.12); }
.work:focus-visible { outline: none; }
.work:focus-visible .work-frame { outline: 2px solid var(--accent); }
.work img { width: 100%; height: auto; background: var(--line); }

.work-caption { padding: 0.9rem 0.2rem 0; font-size: 0.9rem; line-height: 1.5; }
.work-title { font-family: var(--font-serif); font-size: 1.15rem; color: var(--ink); margin-bottom: 0.2rem; }
.work-meta { color: var(--muted); }
.work-meta dt { display: inline; }
.work-meta dd { display: inline; margin: 0; }
.work-meta div { margin: 0; }

.gallery-empty { color: var(--muted); padding: var(--space-lg) 0; }

/* ---------- Lightbox ---------- */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: #121211;
    display: none;
    grid-template-columns: 1fr 320px;
}
.lightbox.open { display: grid; }
.lightbox-stage { position: relative; display: flex; align-items: center; justify-content: center; padding: 3rem 4.5rem; min-height: 0; }
.lightbox-stage img { max-width: 100%; max-height: calc(100vh - 6rem); object-fit: contain; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); }
.lightbox-info { background: #1c1c1a; color: #e8e5de; padding: 4rem 2rem 2rem; overflow-y: auto; }
.lightbox-info h2 { color: #ffffff; font-size: 1.7rem; }
.lightbox-info dl { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1rem; margin: 1.2rem 0; font-size: 0.95rem; }
.lightbox-info dt { color: #9c978d; }
.lightbox-info dd { margin: 0; }
.lightbox-info p { color: #c8c4bb; font-size: 0.95rem; }
.lightbox-info .lb-cat { color: #d9706d; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; }
.lightbox-info .lb-counter { color: #9c978d; font-size: 0.85rem; margin-top: 2rem; }
.lightbox-info .btn { border-color: #e8e5de; color: #e8e5de; margin-top: 0.5rem; }
.lightbox-info .btn:hover { background: #e8e5de; color: #1c1c1a; }

.lb-btn {
    position: absolute;
    background: none;
    border: 0;
    color: #ffffff;
    cursor: pointer;
    width: 52px;
    height: 52px;
    font-size: 1.8rem;
    line-height: 1;
    opacity: 0.7;
    transition: opacity var(--transition);
}
.lb-btn:hover, .lb-btn:focus-visible { opacity: 1; }
.lb-prev { left: 0.8rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: 0.8rem; top: 50%; transform: translateY(-50%); }
.lb-close { right: 0.8rem; top: 0.8rem; z-index: 2; position: fixed; }

body.no-scroll { overflow: hidden; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .gallery { --spalten: 2; }
    .lightbox { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
    .lightbox-stage { padding: 3.5rem 3rem 1rem; }
    .lightbox-stage img { max-height: 62vh; }
    .lightbox-info { padding: 1.2rem 1.5rem 1.5rem; max-height: 35vh; }
    .lightbox-info dl { margin: 0.6rem 0; }
    .lightbox-info .lb-counter { margin-top: 0.6rem; }
}
@media (max-width: 600px) {
    .gallery { --spalten: 1; }
    .lightbox-stage { padding: 3.5rem 0.5rem 0.5rem; }
    .lb-prev, .lb-next { top: auto; bottom: -0.2rem; transform: none; }
}

/* ---------- Anfrageformular (Fenster über der Großansicht) ---------- */
.anfrage {
    width: min(520px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    margin: auto;
    padding: 0;
    border: 0;
    background: var(--paper);
    color: var(--ink);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
.anfrage::backdrop { background: rgba(18, 18, 17, 0.7); }
.anfrage-form { padding: 2rem 1.8rem 1.6rem; }
.anfrage-form h2 { font-size: 1.6rem; margin: 0 2rem 0.2rem 0; }
.anfrage-werk { color: var(--muted); font-style: italic; margin-bottom: 1.2rem; }
.anfrage-form label { display: block; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0.9rem 0 0.3rem; }
.anfrage-form input, .anfrage-form textarea {
    display: block;
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-size: 1rem;
    border-radius: 0;
}
.anfrage-form textarea { resize: vertical; min-height: 8rem; }
.anfrage-form input:focus, .anfrage-form textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.anfrage-falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.anfrage-hinweis { font-size: 0.82rem; color: var(--muted); margin: 0.9rem 0 0; }
.anfrage-status { margin: 0.8rem 0 0; font-size: 0.95rem; min-height: 1.2em; }
.anfrage-status:empty { display: none; }
.anfrage-ok { color: var(--ink); border-left: 3px solid #3d7a4a; padding-left: 0.7rem; }
.anfrage-fehler { color: var(--accent-dark); border-left: 3px solid var(--accent); padding-left: 0.7rem; }
.anfrage-knoepfe { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.2rem; }
.anfrage-knoepfe .btn { font-family: inherit; }
.anfrage-knoepfe .btn:disabled { opacity: 0.5; cursor: wait; }
.anfrage-knoepfe .btn[hidden] { display: none; }
.anfrage-gesendet label, .anfrage-gesendet input, .anfrage-gesendet textarea, .anfrage-gesendet .anfrage-hinweis { display: none; }
.anfrage-gesendet .anfrage-status { margin-top: 0.4rem; }
.anfrage-schliessen {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    width: 2.4rem;
    height: 2.4rem;
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 1.2rem;
    cursor: pointer;
}
.anfrage-schliessen:hover { color: var(--ink); }
@media (max-width: 600px) {
    .anfrage-form { padding: 1.5rem 1.1rem 1.2rem; }
}