/* ==========================================================================
   Basilika — Galerie (Übersicht, Jahr, Detail, Bildansicht).

   Eigene kleine Datei statt Änderung an style.css: das Hauptstylesheet der
   Basilika bleibt unverändert. Genutzt werden dessen Variablen und Bausteine
   (.cards-grid, .card, .gallery-grid, .btn), hier steht nur das Zusätzliche.
   ========================================================================== */

.galerie-jahre {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm);
  margin: 0 auto var(--space-3xl);
}
.galerie-jahre a {
  padding: .4rem 1rem;
  border: 1px solid var(--color-stone);
  border-radius: 2px;
  color: var(--color-charcoal);
  font-weight: 500; letter-spacing: .04em;
  text-decoration: none;
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.galerie-jahre a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.galerie-jahre a[aria-current="page"] { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

.galerie-gruppe + .galerie-gruppe { margin-top: var(--space-4xl); }
.galerie-gruppe__kopf {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md);
  padding-bottom: var(--space-sm); margin-bottom: var(--space-xl);
  border-bottom: 1px solid var(--color-sand);
}
.galerie-gruppe__kopf h2 { margin: 0; color: var(--color-primary); }
.galerie-gruppe__kopf a { font-size: .9rem; letter-spacing: .04em; }

.galerie-karte { text-decoration: none; color: inherit; display: block; }
.galerie-karte__bild { background: var(--color-sand); position: relative; }
.galerie-karte__leer {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--color-stone);
}
.galerie-karte__leer svg { width: 30%; height: auto; }
.galerie-karte__meta {
  display: flex; flex-wrap: wrap; gap: 0 .6rem; margin: 0 0 var(--space-xs);
  font-size: .85rem; letter-spacing: .03em; color: var(--color-gold-dark);
}
.galerie-karte__meta > * + *::before { content: '·'; margin-right: .6rem; color: var(--color-stone); }

.galerie-zurueck-oben { margin-bottom: var(--space-xl); }
.galerie-zurueck-oben a { color: var(--color-primary); text-decoration: none; }
.galerie-leer p { color: var(--color-warm-gray); font-style: italic; }
.galerie-leer p + p { margin-top: var(--space-lg); font-style: normal; }

.galerie-beschreibung { padding-bottom: var(--space-2xl); }
.galerie-beschreibung .container { max-width: 40rem; }
.galerie-beschreibung p { color: var(--color-warm-gray); font-size: 1.05rem; line-height: 1.8; }
.galerie-bilder__anzahl {
  text-align: center; margin: 0 0 var(--space-xl);
  font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-warm-gray);
}
.galerie-raster { list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - .5rem), 15rem), 1fr)); }
.galerie-raster a { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.galerie-raster a:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.galerie-zurueck .btn + .btn { margin-left: var(--space-sm); }

/* --- Bildansicht ------------------------------------------------------- */
.galerie-lk { position: fixed; inset: 0; z-index: 2000; background: rgba(0, 0, 0, .94); color: #fff; }
.galerie-lk[hidden] { display: none; }
.galerie-lk__flaeche {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 4.5rem clamp(.5rem, 6vw, 6rem) 1rem;
}
.galerie-lk__figur { margin: 0; display: flex; flex-direction: column; align-items: center; max-height: 100%; }
.galerie-lk__bild {
  max-width: 100%; max-height: calc(100vh - 9.5rem); object-fit: contain; border-radius: 2px;
  transition: opacity .2s;
}
.galerie-lk__bild.is-laedt { opacity: .35; }
.galerie-lk__unterschrift {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1rem;
  margin-top: var(--space-md); max-width: 60rem; text-align: center;
  font-size: .95rem; color: rgba(255, 255, 255, .85);
}
.galerie-lk__zahl { color: var(--color-gold-light); font-variant-numeric: tabular-nums; }
.galerie-lk__knopf {
  position: absolute; width: 3rem; height: 3rem; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%;
  color: #fff; font-size: 2rem; line-height: 1; cursor: pointer;
  opacity: .8; transition: opacity var(--transition-fast), background var(--transition-fast);
}
.galerie-lk__knopf:hover { opacity: 1; background: rgba(255, 255, 255, .1); }
.galerie-lk__knopf:focus-visible { opacity: 1; outline: 2px solid var(--color-gold-light); outline-offset: 3px; }
.galerie-lk__knopf--zu { top: var(--space-lg); right: var(--space-lg); }
.galerie-lk__knopf--zurueck { left: var(--space-lg); top: 50%; transform: translateY(-50%); }
.galerie-lk__knopf--weiter  { right: var(--space-lg); top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) {
  .galerie-lk__flaeche { padding: 4.5rem .25rem 5rem; }
  .galerie-lk__knopf--zurueck, .galerie-lk__knopf--weiter { top: auto; bottom: var(--space-md); transform: none; }
  .galerie-zurueck .btn { display: block; margin: 0 0 var(--space-sm) !important; }
  .galerie-gruppe__kopf { flex-direction: column; gap: var(--space-xs); }
}

.galerie-nachweis { margin: var(--space-xl) 0 0; text-align: center; font-size: .9rem; color: var(--color-warm-gray); font-style: italic; }
.galerie-nachweis a { color: var(--color-primary); }