/* =========================
   baguetteBox Light Theme
   ========================= */

/* Overlay */
#baguetteBox-overlay {
  background-color: #f2f2eff3 !important;
}

/* Slider weich einblenden lassen */
#baguetteBox-slider {
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Bildbereich */
#baguetteBox-overlay .full-image img {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

/* Figur / Abstand */
#baguetteBox-overlay figure {
  margin: 0;
}

/* Caption */
#baguetteBox-overlay figcaption,
#baguetteBox-overlay .baguetteBox-caption {
  background: rgba(242, 242, 239, 0.92);
  color: #000;
  font-size: 0.95rem;
  line-height: 1.4;
  padding: 0.9rem 1rem;
}

/* Buttons allgemein */
#baguetteBox-overlay .baguetteBox-button {
  background: transparent;
  border: 0;
  box-shadow: none;
  opacity: 1;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Hover / Fokus */
#baguetteBox-overlay .baguetteBox-button:hover,
#baguetteBox-overlay .baguetteBox-button:focus {
  opacity: 0.7;
  transform: scale(1.04);
  outline: none;
}

/* Pfeile und Close-Icon schwarz */
#baguetteBox-overlay #previous-button svg polyline,
#baguetteBox-overlay #next-button svg polyline {
  stroke: #000 !important;
}

#baguetteBox-overlay #close-button svg g {
  stroke: #000 !important;
}

/* Optional: Buttons etwas klarer positionieren */
#baguetteBox-overlay #previous-button,
#baguetteBox-overlay #next-button,
#baguetteBox-overlay #close-button {
  background: transparent;
}

/* Optional: dezenter Hover nur für die SVGs */
#baguetteBox-overlay #previous-button:hover svg polyline,
#baguetteBox-overlay #next-button:hover svg polyline,
#baguetteBox-overlay #close-button:hover svg g {
  opacity: 0.65;
}

/* Bei Tastaturfokus sichtbar, aber passend zum hellen Theme */
#baguetteBox-overlay .baguetteBox-button:focus-visible {
  outline: 2px solid #000;
  outline-offset: 4px;
}