.sortimentgalerie-wrap{width:100%;height:100%;margin:0}
.sortimentgalerie{width:100%;height:100%;border:1px solid rgba(0,0,0,.12);background:#f4f4f4;overflow:hidden}
.sortimentgalerie__preview{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:430px;padding:0;border:0;overflow:hidden;background:#f3f3f3;cursor:pointer;color:inherit;text-align:center}
.sortimentgalerie__preview-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .3s}
.sortimentgalerie__preview:hover .sortimentgalerie__preview-image{transform:scale(1.025)}
.sortimentgalerie__content{position:relative;z-index:1;display:block;width:calc(100% - 2rem);margin:0 1rem 44px;padding:1.4rem 1.25rem;background:rgba(255,255,255,.82);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.sortimentgalerie__content--empty{position:static;width:auto;margin:0}
.sortimentgalerie__logo{display:block;width:auto;max-width:100%;max-height:75px;height:auto;object-fit:contain;margin:0 auto 1rem}
.sortimentgalerie__title{display:block;margin:0 0 .75rem;font-size:1.4rem}
.sortimentgalerie__text{display:block;line-height:1.55}
.sortimentgalerie__text p{margin:0}
.sortimentgalerie__preview-overlay{position:absolute;z-index:2;left:0;right:0;bottom:0;height:44px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.7);color:#fff}
.sortimentgalerie__lightbox{width:min(92vw,1200px);height:min(92vh,900px);border:0;padding:2.5rem;background:#fff}
.sortimentgalerie__lightbox::backdrop{background:rgba(0,0,0,.82)}
.sortimentgalerie__lightbox figure{height:100%;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.sortimentgalerie__lightbox figure img{max-width:100%;max-height:calc(100% - 2rem);object-fit:contain}
.sortimentgalerie__close,.sortimentgalerie__prev,.sortimentgalerie__next{position:absolute;border:0;background:transparent;font-size:2.5rem;line-height:1;cursor:pointer;z-index:2}
.sortimentgalerie__close{right:.75rem;top:.5rem}
.sortimentgalerie__prev{left:.5rem;top:50%;transform:translateY(-50%)}
.sortimentgalerie__next{right:.5rem;top:50%;transform:translateY(-50%)}

/* Exakte Joomla-loadposition-Struktur:
   .com-content-article__body > .moduletable > h3 + .sortimentgalerie-wrap */
.com-content-article__body:has(> .moduletable > .sortimentgalerie-wrap){
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:2rem;
  row-gap:2rem;
  align-items:start;
}

/* Normale Artikel-Inhalte wie Überschrift/Absätze bleiben über die volle Breite. */
.com-content-article__body:has(> .moduletable > .sortimentgalerie-wrap) > :not(.moduletable){
  grid-column:1 / -1;
}

/* EIN Joomla-Modul ist EIN Grid-Element: Titel + Galerie bleiben zusammen. */
.com-content-article__body > .moduletable:has(> .sortimentgalerie-wrap){
  min-width:0;
  width:100%;
  margin:0;
  display:block;
}
.com-content-article__body > .moduletable:has(> .sortimentgalerie-wrap) > h3{
  margin:0 0 .5rem;
}
.com-content-article__body > .moduletable:has(> .sortimentgalerie-wrap) > .sortimentgalerie-wrap{
  width:100%;
  min-width:0;
}
.com-content-article__body > .moduletable:has(> .sortimentgalerie-wrap) .sortimentgalerie{
  width:100%;
  min-width:0;
}

@media(max-width:1000px){
  .com-content-article__body:has(> .moduletable > .sortimentgalerie-wrap){
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:650px){
  .com-content-article__body:has(> .moduletable > .sortimentgalerie-wrap){
    grid-template-columns:1fr;
  }
  .sortimentgalerie__preview{height:400px}
  .sortimentgalerie__content{
    width:calc(100% - 1.5rem);
    margin-left:.75rem;
    margin-right:.75rem;
  }
  .sortimentgalerie__lightbox{padding:2.25rem 1rem 1rem}
}

.sortimentgalerie--above{display:flex;flex-direction:column}
.sortimentgalerie__content--above{
  position:static;
  box-sizing:border-box;
  width:100%;
  margin:0;
  padding:1.4rem 1.25rem;
  background:#fff;
  text-align:center;
}
.sortimentgalerie__content--overlay{
  background:rgba(255,255,255,.82);
}
.sortimentgalerie--above .sortimentgalerie__preview{height:330px}

/* 1.13: Overlay über volle Kartenbreite und weicher Verlauf zum Bild */
.sortimentgalerie__content--overlay{
  box-sizing:border-box;
  width:100%;
  margin:0 0 44px;
  padding:2.6rem 1.5rem 1.45rem;
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,.18) 0%,
    rgba(255,255,255,.58) 22%,
    rgba(255,255,255,.72) 58%,
    rgba(255,255,255,.58) 82%,
    rgba(255,255,255,0) 100%
  );
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.sortimentgalerie__content--overlay .sortimentgalerie__logo{
  filter:drop-shadow(0 1px 1px rgba(255,255,255,.7));
}
.sortimentgalerie__content--overlay .sortimentgalerie__text{
  text-shadow:0 1px 1px rgba(255,255,255,.85);
}
@media(max-width:650px){
  .sortimentgalerie__content--overlay{
    width:100%;
    margin-left:0;
    margin-right:0;
  }
}

/* 1.14: Overlay oben statt mittig; Text wieder klar lesbar.
   Der untere Bereich läuft weich ins Vorschaubild aus. */
.sortimentgalerie--overlay .sortimentgalerie__preview{
  align-items:flex-start;
}
.sortimentgalerie__content--overlay{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:auto;
  box-sizing:border-box;
  width:100%;
  margin:0;
  padding:1.5rem 1.35rem 3.5rem;
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,.96) 0%,
    rgba(255,255,255,.94) 58%,
    rgba(255,255,255,.78) 76%,
    rgba(255,255,255,.38) 90%,
    rgba(255,255,255,0) 100%
  );
  text-align:center;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.sortimentgalerie__content--overlay .sortimentgalerie__logo{
  margin-top:0;
}
.sortimentgalerie__content--overlay .sortimentgalerie__text{
  color:#222;
  text-shadow:none;
}

/* 1.15: Vorschaubild füllt die Kachel immer vollständig.
   Unterschiedliche Bildformate werden proportional skaliert und nötigenfalls beschnitten. */
.sortimentgalerie__preview-image{
  position:absolute;
  inset:0;
  display:block;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center center;
}

/* 1.16: höhere Kacheln; Produktbild beginnt optisch erst unterhalb des Logos.
   Der obere Logobereich bleibt ruhig/weiß, darunter blendet das Bild ein. */
.sortimentgalerie__preview{
  height:520px;
}
.sortimentgalerie__preview-image{
  top:105px !important;
  bottom:0 !important;
  height:calc(100% - 105px) !important;
  object-fit:cover !important;
  object-position:center center;
}
.sortimentgalerie__content--overlay{
  min-height:105px;
  padding:1.5rem 1.35rem 3.5rem;
  background:linear-gradient(
    to bottom,
    #fff 0,
    #fff 105px,
    rgba(255,255,255,.96) 145px,
    rgba(255,255,255,.90) 58%,
    rgba(255,255,255,.62) 76%,
    rgba(255,255,255,.24) 90%,
    rgba(255,255,255,0) 100%
  );
}
.sortimentgalerie__content--overlay .sortimentgalerie__logo{
  margin-bottom:1.1rem;
}
@media(max-width:650px){
  .sortimentgalerie__preview{height:500px}
}

/* 1.17: längerer, ruhigerer Weißverlauf für bessere Textlesbarkeit */
.sortimentgalerie__content--overlay{
  padding:1.5rem 1.35rem 5.75rem;
  background:linear-gradient(
    to bottom,
    #fff 0,
    #fff 105px,
    rgba(255,255,255,.98) 165px,
    rgba(255,255,255,.96) 55%,
    rgba(255,255,255,.90) 68%,
    rgba(255,255,255,.72) 79%,
    rgba(255,255,255,.45) 88%,
    rgba(255,255,255,.18) 95%,
    rgba(255,255,255,0) 100%
  );
}

/* 1.18: mehr Bildfläche unterhalb des Textbereichs */
.sortimentgalerie__preview{
  height:600px;
}
@media(max-width:650px){
  .sortimentgalerie__preview{
    height:560px;
  }
}

/* 1.19: Lightbox ohne internen Scrollbalken, größere rote Navigation */
.sortimentgalerie__lightbox{
  box-sizing:border-box;
  width:min(94vw,1200px);
  height:min(92dvh,900px);
  max-width:94vw;
  max-height:92dvh;
  overflow:hidden !important;
  padding:2.5rem 5rem 1.5rem;
}
.sortimentgalerie__lightbox figure{
  box-sizing:border-box;
  width:100%;
  height:100%;
  min-height:0;
  overflow:hidden;
}
.sortimentgalerie__lightbox figure img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:calc(100% - 2rem);
  object-fit:contain;
}
.sortimentgalerie__lightbox figcaption{
  flex:0 0 auto;
  margin:.5rem 0 0;
}
.sortimentgalerie__prev,
.sortimentgalerie__next{
  width:58px;
  height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 0 5px;
  border:0;
  border-radius:50%;
  background:#98152b;
  color:#fff;
  font-size:3.5rem;
  font-weight:300;
  line-height:1;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.sortimentgalerie__prev{left:1rem}
.sortimentgalerie__next{right:1rem}
.sortimentgalerie__prev:hover,
.sortimentgalerie__next:hover{
  background:#7d1022;
}
.sortimentgalerie__close{
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  right:.75rem;
  top:.75rem;
  padding:0;
  border-radius:50%;
  background:#98152b;
  color:#fff;
  font-size:2.25rem;
}

/* Verhindert Seitenscrollen, solange ein Dialog geöffnet ist */
html:has(.sortimentgalerie__lightbox[open]){
  overflow:hidden;
}

@media(max-width:650px){
  .sortimentgalerie__lightbox{
    width:96vw;
    height:92dvh;
    max-width:96vw;
    max-height:92dvh;
    padding:3.5rem .75rem 1rem;
  }
  .sortimentgalerie__prev,
  .sortimentgalerie__next{
    width:46px;
    height:46px;
    font-size:2.8rem;
    opacity:.92;
  }
  .sortimentgalerie__prev{left:.5rem}
  .sortimentgalerie__next{right:.5rem}
}

/* 1.19 Lightbox */
.sortimentgalerie__lightbox{
  box-sizing:border-box;
  width:min(94vw,1400px);
  height:94vh;
  max-height:94vh;
  padding:1.25rem 5.5rem 1rem;
  overflow:hidden !important;
  border:0;
  background:#fff;
}
.sortimentgalerie__lightbox figure{
  box-sizing:border-box;
  width:100%;
  height:100%;
  min-height:0;
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.sortimentgalerie__lightbox figure img{
  display:block;
  min-width:0;
  min-height:0;
  max-width:100%;
  max-height:calc(100% - 2rem);
  width:auto;
  height:auto;
  object-fit:contain;
}
.sortimentgalerie__lightbox figcaption{
  flex:0 0 auto;
  margin:.5rem 0 0;
}
.sortimentgalerie__prev,
.sortimentgalerie__next{
  top:50%;
  width:58px;
  height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:0;
  border-radius:50%;
  background:#98152b;
  color:#fff;
  font-size:3rem;
  font-family:Arial,sans-serif;
  line-height:1;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
  transform:translateY(-50%);
}
.sortimentgalerie__prev{left:1rem}
.sortimentgalerie__next{right:1rem}
.sortimentgalerie__prev:hover,
.sortimentgalerie__next:hover{background:#7f1023}
.sortimentgalerie__close{
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  right:.75rem;
  top:.75rem;
  padding:0;
  border-radius:50%;
  background:#fff;
  color:#98152b;
  font-size:2.3rem;
}
@media(max-width:650px){
  .sortimentgalerie__lightbox{
    width:96vw;
    height:92vh;
    max-height:92vh;
    padding:3.5rem .75rem 1rem;
  }
  .sortimentgalerie__prev,
  .sortimentgalerie__next{
    width:48px;
    height:48px;
    font-size:2.5rem;
    background:rgba(152,21,43,.92);
  }
  .sortimentgalerie__prev{left:.5rem}
  .sortimentgalerie__next{right:.5rem}
}


/* 1.21: mehr Raum für Herstellerlogos */
.sortimentgalerie__logo{
  display:block;
  width:auto;
  max-width:100%;
  max-height:105px;
  object-fit:contain;
  margin-left:auto;
  margin-right:auto;
}
