/* Galerie-Modul: Kachel-Raster + Lightbox-Karussell.
   Funktioniert auf jeder Seite ohne weitere Konfiguration (siehe Standardwerte unten).
   Eine Kundenseite kann ihr eigenes Erscheinungsbild geben, indem sie NUR die folgenden
   Variablen in ihrem eigenen Stylesheet ueberschreibt (z. B. in :root) - das Modul selbst
   bleibt dabei unveraendert:
     --galerie-text            Farbe der Bildunterschrift
     --galerie-text-on-dark    Farbe von Text/Icons auf der dunklen Lightbox-Flaeche
     --galerie-accent          Hervorhebung bei Hover/Fokus (Pfeile, Schliessen-Button)
     --galerie-surface         Hintergrund einer leeren Kachel ("Bild folgt")
     --galerie-surface-border  Rahmen der leeren Kachel
     --galerie-muted           Farbe des "Bild folgt"-Hinweistexts
     --galerie-frame           Rahmenfarbe um das Bild in der Lightbox
     --galerie-font-caption    Schriftart der Bildunterschrift
     --galerie-font-ui         Schriftart von Zaehler/Pfeilen/Hinweistext
     --galerie-gap             Abstand zwischen den Kacheln
     --galerie-gap-top         Abstand oberhalb des Rasters (z. B. zum Einleitungstext) */

.galerie-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--galerie-gap, 1rem);
  margin-top: var(--galerie-gap-top, 3rem);
}
@media (min-width: 600px) { .galerie-grid { grid-template-columns: repeat(3, 1fr); } }
/* Bewusst keine 4. Spalte: drei Bilder pro Reihe bleiben auch im Vollbild gross genug. */

.galerie-item {
  position: static;
  aspect-ratio: auto;
  overflow: visible;
  background: transparent;
  border: 0;
  cursor: default;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0;
}
.galerie-thumb {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--galerie-surface, #ECE8E0);
  border: 1px solid var(--galerie-surface-border, #E0DCD2);
  cursor: zoom-in;
}
.galerie-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s; }
.galerie-item:hover .galerie-thumb img { transform: scale(1.05); }
.galerie-thumb:focus-visible { outline: 3px solid var(--galerie-accent, #B45309); outline-offset: 3px; }

.galerie-cap {
  font-family: var(--galerie-font-caption, Georgia, 'Times New Roman', serif);
  font-style: italic;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--galerie-text, #1A1A1A);
  opacity: 0.78;
}

/* Fehlendes Bild -> "Bild folgt", Unterschrift bleibt sichtbar */
.galerie-item.is-empty .galerie-thumb { cursor: default; display: flex; align-items: center; justify-content: center; }
.galerie-item.is-empty .galerie-thumb img { display: none; }
.galerie-item.is-empty .galerie-thumb::after {
  content: "Bild folgt";
  color: var(--galerie-muted, #B8B2A6);
  font-family: var(--galerie-font-ui, system-ui, -apple-system, 'Segoe UI', sans-serif);
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.galerie-item.is-empty:hover .galerie-thumb img { transform: none; }

/* Mehrere Bilder in einer Kachel werden gestapelt; nur das aktive ist sichtbar. */
.galerie-item.has-carousel .galerie-thumb img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.galerie-item.has-carousel .galerie-thumb img.is-active { opacity: 1; }

/* Pfeile in der Kachel */
.galerie-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(17, 17, 17, 0.55);
  color: var(--galerie-text-on-dark, #FFFFFF);
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  transition: background 0.2s;
}
.galerie-nav:hover { background: var(--galerie-accent, #B45309); }
.galerie-nav--prev { left: 0.4rem; }
.galerie-nav--next { right: 0.4rem; }
.galerie-nav:focus-visible { outline: 3px solid var(--galerie-accent, #B45309); outline-offset: 2px; }

/* Zaehler-Badge oben rechts in der Kachel */
.galerie-count {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  background: rgba(17, 17, 17, 0.6);
  color: var(--galerie-text-on-dark, #FFFFFF);
  font-family: var(--galerie-font-ui, system-ui, -apple-system, 'Segoe UI', sans-serif);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  padding: 0.15rem 0.45rem;
  z-index: 2;
}

/* === Lightbox (Vollbild-Ansicht mit Karussell) === */
.lightbox {
  position: fixed; inset: 0; z-index: 300; background: rgba(17,17,17,0.93);
  display: none; align-items: center; justify-content: center; padding: 2rem;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 88vh; object-fit: contain; border: 3px solid var(--galerie-frame, rgba(255,255,255,0.25)); }
.lightbox-close {
  position: absolute; top: 0.75rem; right: 1.25rem; background: none; border: none;
  color: var(--galerie-text-on-dark, #FFFFFF); font-size: 2.6rem; line-height: 1; cursor: pointer;
}
.lightbox-close:hover { color: var(--galerie-accent, #B45309); }
.lightbox-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  max-width: 92vw;
}
.lightbox-figure img { max-width: 92vw; max-height: 78vh; object-fit: contain; border: 3px solid var(--galerie-frame, rgba(255,255,255,0.25)); }
.lightbox-cap {
  color: var(--galerie-text-on-dark, #FFFFFF);
  font-family: var(--galerie-font-caption, Georgia, 'Times New Roman', serif);
  font-style: italic;
  font-size: 1rem;
  text-align: center;
  max-width: 60ch;
}
.lightbox-prev, .lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--galerie-text-on-dark, #FFFFFF);
  font-size: 3rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.5rem 1rem;
  transition: color 0.2s;
}
.lightbox-prev { left: 0.25rem; }
.lightbox-next { right: 0.25rem; }
.lightbox-prev:hover, .lightbox-next:hover { color: var(--galerie-accent, #B45309); }
.lightbox-counter {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--galerie-muted, #cbbfae);
  font-family: var(--galerie-font-ui, system-ui, -apple-system, 'Segoe UI', sans-serif);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
}
.lightbox button:focus-visible { outline: 3px solid var(--galerie-accent, #B45309); outline-offset: 3px; }
@media (max-width: 560px) {
  .lightbox-prev, .lightbox-next { font-size: 2.2rem; padding: 0.4rem 0.6rem; }
  .lightbox-figure img { max-height: 70vh; }
}