/* Existing gallery/lightbox selectors preserved for the external footer renderer. */
.coati-galerie{
  margin: 48px 0
}

.coati-galerie-kopf{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px
}

.coati-galerie-kopf h2{
  margin: 0
}

.coati-galerie-kopf span{
  color: #6b7280;
  font-size: .95rem
}

.coati-galerie-grid{
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px
}

.coati-galerie-element{
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 180px;
  border-radius: 12px;
  background: #edf2ef;
  aspect-ratio: 4/3
}

.coati-galerie-element--gross{
  grid-column: span 2;
  grid-row: span 2;
  min-height: 372px
}

.coati-galerie-bild{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s
}

.coati-galerie-element::after{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.08);
  content: "";
  opacity: 0;
  transition: opacity .25s
}

.coati-galerie-element:hover .coati-galerie-bild{
  transform: scale(1.035)
}

.coati-galerie-element:hover::after{
  opacity: 1
}

@media (max-width:800px){
.coati-galerie-grid{
    grid-template-columns: repeat(2,minmax(0,1fr))
  }
.coati-galerie-element--gross{
    grid-column: span 2;
    grid-row: auto;
    min-height: 320px
  }
}

@media (max-width:520px){
.coati-galerie-grid{
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px
  }
.coati-galerie-element,
.coati-galerie-element--gross{
    grid-column: auto;
    min-height: 140px
  }
}

body.coati-lightbox-offen{
  overflow: hidden
}

.coati-lightbox{
  position: fixed;
  z-index: 999999;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 70px 80px 50px;
  background: rgba(8,15,12,.94)
}

.coati-lightbox.ist-offen{
  display: flex
}

.coati-lightbox-inhalt{
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center
}

.coati-lightbox-bild{
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 130px);
  width: auto;
  height: auto;
  border-radius: 8px;
  object-fit: contain;
  box-shadow: 0 15px 50px rgba(0,0,0,.45)
}

.coati-lightbox-nav,
.coati-lightbox-schliessen{
  position: absolute;
  z-index: 2;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  color: #fff;
  cursor: pointer;
  transition: background .2s,transform .2s
}

.coati-lightbox-nav:hover,
.coati-lightbox-schliessen:hover{
  background: rgba(255,255,255,.25);
  transform: scale(1.05)
}

.coati-lightbox-schliessen{
  top: 18px;
  right: 22px;
  width: 46px;
  height: 46px;
  font-size: 34px;
  line-height: 40px
}

.coati-lightbox-nav{
  top: 50%;
  width: 52px;
  height: 52px;
  margin-top: -26px;
  font-size: 44px;
  line-height: 44px
}

.coati-lightbox-zurueck{
  left: 18px
}

.coati-lightbox-weiter{
  right: 18px
}

.coati-lightbox-info{
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  pointer-events: none
}

.coati-lightbox-zaehler{
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: .92rem
}

@media (max-width:700px){
.coati-lightbox{
    padding: 62px 14px 55px
  }
.coati-lightbox-bild{
    max-height: calc(100vh - 120px);
    border-radius: 5px
  }
.coati-lightbox-nav{
    top: auto;
    bottom: 12px;
    width: 46px;
    height: 46px;
    margin: 0;
    background: rgba(255,255,255,.18)
  }
.coati-lightbox-zurueck{
    left: 14px
  }
.coati-lightbox-weiter{
    right: 14px
  }
.coati-lightbox-schliessen{
    top: 10px;
    right: 12px
  }
.coati-lightbox-info{
    bottom: 18px
  }
}