/* sixtina.css — Stile fuer die Vanilla-Komponenten aus sixtina.js.
   Ergaenzt style.css / theming.css / web.css / mobilenavigation.css. */

/* ---- Header-Slideshow (Fade) --------------------------------------------- */
#emotion-header { position: relative; overflow: hidden; }

#emotion-header .sx-slides {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1;
}
#emotion-header .sx-slides img {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
#emotion-header .sx-slides img.sx-active { opacity: 1; }

/* Titel-SVG ueber der Slideshow halten */
#emotion-header #emotion-header-title-svg { position: absolute; z-index: 2; }

/* ---- Mobil-Navigation: geoeffnete Zustaende ------------------------------ */
@media only screen and (max-width: 767px) {
  #diyfeMobileNav.sx-nav-open > ul.mainNav1 { display: block; }
  #diyfeMobileNav li.selected > .diyfeDropDownSubList { display: block; }
}

/* ---- Lightbox ------------------------------------------------------------ */
.sx-lightbox {
  position: fixed; inset: 0;
  z-index: 9999;
  display: none;
  align-items: center; justify-content: center;
  padding: 2vmin;
  background: rgba(0, 0, 0, 0.85);
  cursor: zoom-out;
}
.sx-lightbox.sx-open { display: flex; }
.sx-lightbox img {
  max-width: 96vw; max-height: 96vh;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
}