/* =============================================================================
   galerie.css — Galerie-Seite spezifische Styles
   Wird nach styles.css geladen und überschreibt nur was nötig ist.
   ============================================================================= */

/* ─── FILTER BAR ─── */
.filter-bar {
  margin-bottom: 56px;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.filter-bar::-webkit-scrollbar { display: none; }

.filter-inner {
  display: inline-flex;
  position: relative;
  border-bottom: 1px solid var(--border);
  gap: 0;
  white-space: nowrap;
}

/* Gleitender Gold-Unterstrich */
.filter-glider {
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 2px;
  width: 60px;
  background: var(--gold);
  transition:
    transform 0.35s var(--ease-out-expo),
    width 0.35s var(--ease-out-expo);
  pointer-events: none;
  will-change: transform, width;
}

.filter-btn {
  padding: 0 28px;
  height: 48px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  display: inline-flex;
  align-items: center;
  transition: color 0.2s ease, background 0.2s ease;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.filter-btn:hover {
  color: var(--text);
  background: var(--cream-dark);
}
.filter-btn.active {
  color: var(--green-deep);
  font-weight: 700;
}
.filter-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

@media (max-width: 640px) {
  .filter-btn { padding: 0 18px; font-size: 10px; }
}

/* ─── GALLERY MASONRY ─── */
.gallery-section { padding: 80px 0 120px; }

.gallery-masonry {
  columns: 4;
  column-gap: 16px;
}
@media (max-width: 1024px) { .gallery-masonry { columns: 3; } }
@media (max-width: 640px)  { .gallery-masonry { columns: 2; } }
@media (max-width: 400px)  { .gallery-masonry { columns: 1; } }

.gallery-item {
  break-inside: avoid;
  margin-bottom: 16px;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  background: rgba(255, 255, 255, 0.05);
}
.gallery-item:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}
.gallery-item img {
  width: 100%;
  display: block;
  border-radius: var(--radius-md);
}

.gallery-placeholder {
  width: 100%;
  display: block;
  background: linear-gradient(135deg, var(--green-deep), var(--green-mid));
  position: relative;
  overflow: hidden;
}
.gallery-placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23C8943F' stroke-width='0.4' opacity='0.2'%3E%3Cpolygon points='30,3 40,11 50,11 56,20 56,30 50,39 50,48 40,55 30,55 20,48 10,48 4,39 4,30 10,21 10,11'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 60px 60px;
}
.gallery-placeholder-icon {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(247, 243, 236, 0.3);
}
.gallery-placeholder-icon svg {
  width: 32px;
  height: 32px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}
.gallery-placeholder-icon span {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
}

.gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(27, 58, 45, 0.85) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
  display: flex;
  align-items: flex-end;
  padding: 16px;
}
.gallery-item:hover .gallery-overlay { opacity: 1; }

.gallery-item-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--cream);
}

/* ─── LIGHTBOX ─── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s var(--ease-out);
}
.lightbox.open {
  opacity: 1;
  visibility: visible;
}

.lightbox-content {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.lightbox-placeholder {
  width: 600px;
  max-width: 90vw;
  aspect-ratio: 4 / 3;
  background: var(--green-deep);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-placeholder svg {
  width: 80px;
  height: 80px;
}

.lightbox-img {
  max-width: 90vw;
  max-height: 85vh;
  display: block;
  object-fit: contain;
}

.lightbox-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  color: var(--cream);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.2); }
.lightbox-close:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.lightbox-close svg {
  width: 20px;
  height: 20px;
}

/* dropdown-sub list-style (mobile nav) */
.dropdown-sub { list-style: none; }