/* SolarExpert Referenzgalerie 1.0.3 — lokale JPG-Projektbilder, keine PDF-Ausgabe. */
.sxrg-gallery,
.sxrg-gallery *,
.sxrg-lightbox,
.sxrg-lightbox * {
  box-sizing: border-box;
}


.sxrg-gallery {
  --sxrg-accent: #ff7415;
  --sxrg-accent-dark: #b84908;
  --sxrg-ink: #171411;
  --sxrg-muted: #6d655f;
  --sxrg-paper: #fffaf6;
  --sxrg-line: #ead9ce;
  --sxrg-shadow: 0 22px 52px rgba(62, 33, 17, .14);
  color: var(--sxrg-ink);
  font-family: inherit;
}










.sxrg-gallery__eyebrow {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 18px;
  color: #86401d;
  font-size: clamp(.76rem, 1vw, .9rem);
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1.35;
  text-transform: uppercase;
}


.sxrg-gallery__eyebrow::before {
  content: "";
  flex: 0 0 52px;
  width: 52px;
  height: 4px;
  border-radius: 999px;
  background: var(--sxrg-accent, #ff7415);
}


.sxrg-gallery__title {
  max-width: 1020px;
  margin: 0;
  color: var(--sxrg-ink);
  font-size: clamp(2.25rem, 5.4vw, 5.3rem);
  font-weight: 500;
  letter-spacing: -.055em;
  line-height: .99;
  text-wrap: balance;
}


.sxrg-gallery__title span {
  display: block;
  color: var(--sxrg-accent, #ff7415);
}


.sxrg-gallery__subtitle {
  max-width: 890px;
  margin: 28px 0 0;
  color: #37312d;
  font-size: clamp(1.04rem, 1.45vw, 1.3rem);
  line-height: 1.7;
}








.sxrg-gallery {
  width: 100%;
}




.sxrg-gallery__header {
  max-width: 900px;
  margin-bottom: 32px;
}


.sxrg-gallery__title {
  font-size: clamp(2.1rem, 4.8vw, 4.4rem);
}


.sxrg-gallery__toolbar {
  margin-bottom: 24px;
  overflow: hidden;
}


.sxrg-gallery__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}


.sxrg-gallery__filter,
.sxrg-gallery__more,
.sxrg-lightbox button {
  font: inherit;
}


.sxrg-gallery__filter {
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 11px 20px !important;
  border: 1px solid var(--sxrg-line) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .93) !important;
  color: var(--sxrg-ink) !important;
  box-shadow: 0 7px 18px rgba(58, 31, 17, .05) !important;
  font-size: .92rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}


.sxrg-gallery__filter:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 106, 0, .55) !important;
  box-shadow: 0 10px 24px rgba(58, 31, 17, .09) !important;
}


.sxrg-gallery__filter[aria-pressed="true"] {
  border-color: var(--sxrg-accent, #ff7415) !important;
  background: var(--sxrg-accent, #ff7415) !important;
  color: #fff !important;
  box-shadow: 0 12px 26px rgba(255, 106, 0, .22) !important;
}


.sxrg-gallery__grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(12px, 1.5vw, 20px) !important;
  align-items: stretch !important;
}


.sxrg-card {
  position: relative !important;
  display: block !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  aspect-ratio: 4 / 3 !important;
  border: 4px solid rgba(255, 255, 255, .98) !important;
  border-radius: clamp(18px, 1.8vw, 25px) !important;
  background: #e8dfd8 !important;
  box-shadow: 0 11px 28px rgba(57, 31, 17, .13) !important;
  transform: translateZ(0) !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
}


.sxrg-card[hidden] {
  display: none !important;
}


.sxrg-card__link {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: transparent !important;
  color: #fff !important;
  text-decoration: none !important;
  cursor: zoom-in !important;
}


.sxrg-card__media {
  position: relative !important;
  isolation: isolate !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: inherit !important;
  background-color: #e8dfd8 !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}


.sxrg-card__image {
  position: relative !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  min-width: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  transform: scale(1.003) !important;
  transition: transform .42s cubic-bezier(.2, .7, .2, 1), filter .25s ease !important;
}


.sxrg-card__image.sxrg-image-error {
  opacity: 0 !important;
}


.sxrg-card__shade {
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  display: block !important;
  background: linear-gradient(180deg, rgba(18, 14, 11, 0) 28%, rgba(18, 14, 11, .11) 51%, rgba(18, 14, 11, .91) 100%) !important;
  pointer-events: none !important;
}


.sxrg-card__copy {
  position: absolute !important;
  z-index: 2 !important;
  right: 54px !important;
  bottom: 14px !important;
  left: 14px !important;
  display: grid !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  pointer-events: none !important;
}


.sxrg-card__category {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: max-content !important;
  max-width: 100% !important;
  min-height: 22px !important;
  margin: 0 !important;
  padding: 5px 8px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, .28) !important;
  border-radius: 999px !important;
  background: rgba(255, 106, 0, .94) !important;
  color: #fff !important;
  font-size: .63rem !important;
  font-weight: 800 !important;
  letter-spacing: .055em !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}


.sxrg-card__title {
  display: -webkit-box !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  font-size: clamp(.88rem, 1.05vw, 1.04rem) !important;
  font-weight: 750 !important;
  letter-spacing: -.015em !important;
  line-height: 1.22 !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .32) !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}


.sxrg-card__zoom {
  position: absolute !important;
  z-index: 3 !important;
  right: 12px !important;
  bottom: 12px !important;
  display: grid !important;
  place-items: center !important;
  width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, .48) !important;
  border-radius: 50% !important;
  background: rgba(255, 106, 0, .96) !important;
  color: #fff !important;
  box-shadow: 0 9px 22px rgba(0, 0, 0, .18) !important;
  pointer-events: none !important;
}


.sxrg-card__zoom svg {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
}


@media (hover: hover) {

  .sxrg-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--sxrg-shadow) !important;
  }


  .sxrg-card:hover .sxrg-card__image {
    transform: scale(1.055) !important;
    filter: saturate(1.04) contrast(1.03) !important;
  }

}


.sxrg-gallery__footer {
  display: grid;
  justify-items: start;
  gap: 14px;
  margin-top: 28px;
}


.sxrg-gallery__status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 20px;
  margin: 0;
  color: var(--sxrg-muted);
  font-size: .9rem;
}


.sxrg-gallery__status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sxrg-accent, #ff7415);
  box-shadow: 0 0 0 5px rgba(255, 106, 0, .13);
}


.sxrg-gallery__more {
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  min-height: 54px !important;
  margin: 0 !important;
  padding: 14px 28px !important;
  border: 1px solid var(--sxrg-accent, #ff7415) !important;
  border-radius: 999px !important;
  background: var(--sxrg-accent, #ff7415) !important;
  color: #fff !important;
  box-shadow: 0 13px 28px rgba(255, 106, 0, .22) !important;
  font-size: .96rem !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}


.sxrg-gallery__more[hidden] {
  display: none !important;
}


.sxrg-gallery__more svg {
  width: 18px;
  height: 18px;
}


.sxrg-gallery__filter:focus-visible,
.sxrg-gallery__more:focus-visible,
.sxrg-card__link:focus-visible,
.sxrg-lightbox button:focus-visible {
  outline: 3px solid rgba(255, 106, 0, .5) !important;
  outline-offset: 3px !important;
}


html.sxrg-lightbox-open,
body.sxrg-lightbox-open {
  overflow: hidden !important;
}


.sxrg-lightbox[hidden] {
  display: none !important;
}


.sxrg-lightbox {
  position: fixed !important;
  z-index: 2147483646 !important;
  inset: 0 !important;
  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr) 64px !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  padding: 76px 20px 24px !important;
  background: rgba(14, 11, 9, .94) !important;
  color: #fff !important;
  backdrop-filter: blur(10px) !important;
}


.sxrg-lightbox__stage {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: 14px !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
}


.sxrg-lightbox__image-wrap {
  display: grid !important;
  place-items: center !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border-radius: 20px !important;
}


.sxrg-lightbox__image {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: auto !important;
  border-radius: 18px !important;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .4) !important;
}


.sxrg-lightbox__caption {
  display: grid !important;
  justify-items: center !important;
  gap: 7px !important;
  text-align: center !important;
}


.sxrg-lightbox__category {
  color: #ff9a58 !important;
  font-size: .72rem !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}


.sxrg-lightbox__title {
  max-width: 860px !important;
  color: #fff !important;
  font-size: clamp(1rem, 2vw, 1.35rem) !important;
  line-height: 1.3 !important;
}


.sxrg-lightbox__close,
.sxrg-lightbox__nav {
  appearance: none !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, .24) !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .1) !important;
  color: #fff !important;
  cursor: pointer !important;
}


.sxrg-lightbox__close {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  width: 44px !important;
  height: 44px !important;
}


.sxrg-lightbox__nav {
  width: 52px !important;
  height: 52px !important;
}


.sxrg-lightbox__close svg,
.sxrg-lightbox__nav svg {
  width: 23px !important;
  height: 23px !important;
}
























@media (max-width: 980px) {

  .sxrg-gallery__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }


  

  
}


@media (max-width: 700px) {

  

  .sxrg-gallery__eyebrow::before {
    flex-basis: 34px;
    width: 34px;
  }


  .sxrg-gallery__title {
    font-size: clamp(2.05rem, 11vw, 3.7rem);
  }


  .sxrg-gallery__filters {
    flex-wrap: nowrap;
    padding: 2px 2px 10px;
    overflow-x: auto;
    scrollbar-width: thin;
  }


  .sxrg-gallery__filter {
    min-height: 42px !important;
    padding: 10px 16px !important;
    font-size: .82rem !important;
  }


  .sxrg-gallery__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }


  .sxrg-card {
    border-width: 3px !important;
    border-radius: 18px !important;
  }


  .sxrg-card__copy {
    right: 42px !important;
    bottom: 10px !important;
    left: 10px !important;
    gap: 4px !important;
  }


  .sxrg-card__category {
    min-height: 18px !important;
    padding: 4px 6px !important;
    font-size: .52rem !important;
  }


  .sxrg-card__title {
    font-size: clamp(.7rem, 3.4vw, .88rem) !important;
    line-height: 1.18 !important;
  }


  .sxrg-card__zoom {
    right: 8px !important;
    bottom: 8px !important;
    width: 30px !important;
    height: 30px !important;
  }


  .sxrg-card__zoom svg {
    width: 13px !important;
    height: 13px !important;
  }


  .sxrg-gallery__more {
    width: 100% !important;
  }


  .sxrg-lightbox {
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;
    gap: 4px !important;
    padding: 70px 8px 18px !important;
  }


  .sxrg-lightbox__nav {
    width: 40px !important;
    height: 40px !important;
  }


  .sxrg-lightbox__close {
    top: 14px !important;
    right: 14px !important;
    width: 42px !important;
    height: 42px !important;
  }


  
}


@media (max-width: 390px) {

  .sxrg-card__category {
    display: none !important;
  }


  .sxrg-card__title {
    font-size: .68rem !important;
  }

}


/* Match the existing SolarExpert layout, without a second page frame. */
.sts-references .sxrg-gallery { width:100%; margin:0; padding:0; border:0; background:none; }
.sxrg-gallery__filter[aria-pressed="true"] { color:#202a23 !important; }
.sxrg-card__category, .sxrg-card__zoom { background:#b84908 !important; }
.sxrg-gallery__more { color:#202a23 !important; }
.sxrg-lightbox { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; }
.sts-shell .sts-existing-reference-heading { margin:52px 0 24px; font-size:1.65rem; }
@media (max-width:700px) {
  .sxrg-gallery__grid { grid-template-columns:1fr !important; gap:18px !important; }
  .sxrg-card__copy { right:60px !important; left:18px !important; bottom:18px !important; }
  .sxrg-card__title { font-size:1rem !important; line-height:1.3 !important; }
  .sxrg-card__category { display:inline-flex !important; font-size:.65rem !important; padding:6px 9px !important; }
  .sxrg-card__zoom { width:38px !important; height:38px !important; right:14px !important; bottom:14px !important; }
}
@media (prefers-reduced-motion:reduce) {
  .sxrg-gallery *, .sxrg-lightbox * { transition:none !important; }
}
@media print {
  .sxrg-gallery__toolbar, .sxrg-gallery__footer, .sxrg-lightbox { display:none !important; }
  .sxrg-gallery .sxrg-card[hidden] { display:block !important; }
  .sxrg-gallery__grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .sxrg-card { break-inside:avoid; box-shadow:none !important; }
}

/* Prevent filter labels from shrinking into one another on narrow screens. */
.sxrg-gallery__filter { flex:0 0 auto !important; }
@media (max-width:700px) { .sxrg-gallery__filters { flex-wrap:wrap; overflow:visible; } }