#gallery {
	display: none;
}

/* gallerysection */

.gallerybg {
	background:#fff;
	overflow: hidden;
}

.gallerysection {
	padding-top:var(--space-padding);
	padding-bottom:var(--space-padding);
}

.gallery {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 10px;
      max-width: 100%;
      margin: 0 auto;
    }

.gallery > div {
  aspect-ratio: 16 / 12;
  overflow: hidden;
  position: relative; 
}

.gallery .item2,
.gallery .item3,
.gallery .item4,
.gallery .item5{
  aspect-ratio: 16 / 11.7 !important;
}

.gallery img {
  position: absolute;
  inset: 0;   
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
	border-radius: var(--radius);
}


.gallery .morebilder {
	position: absolute;
  background: #FFF;
  right: 15px;
  top: 15px;
  padding: 5px 20px;
  border-radius: var(--radius);
  opacity: 0.9;
  color: #585655;
	z-index: 9;
	font-size: 17px;
	cursor: pointer;
	transition: background 0.3s;
}


.gallery .morebilder:hover {
	background:rgba(var(--color-3), 1);
	color:#FFF;
}



    /* Positionierung der einzelnen Bilder */
    .item1 { grid-column: 1;       grid-row: 1 / span 2;  position: relative;  }
    .item2 { grid-column: 2;       grid-row: 1; }
    .item3 { grid-column: 3;       grid-row: 1; position: relative; }
    .item4 { grid-column: 2;       grid-row: 2; }
    .item5 { grid-column: 3;       grid-row: 2; }

    /* Responsive: auf engen Bildschirmen alle Bilder übereinander */
    @media (max-width: 768px) {
      .gallery {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(5, auto);
      }
      .item1 { grid-row: 1; grid-column: 1; }
      .item2 { grid-row: 2; grid-column: 1; }
      .item3 { grid-row: 3; grid-column: 1; }
      .item4 { grid-row: 4; grid-column: 1; }
      .item5 { grid-row: 5; grid-column: 1; }
    }



@media only screen and (max-width: 767px) {
	.item4, .item5 {
		display: none;
	}
}


@media (max-width: 767px) {
  .gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
    gap: 10px;
  }

  /* Großes Bild über beide Spalten */
  .item1 {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  /* Die nächsten beiden Bilder nebeneinander */
  .item2 {
    grid-column: 1;
    grid-row: 2;
  }
  .item3 {
    grid-column: 2;
    grid-row: 2;
  }
  /* Zusätzliche Bilder ausblenden */
  .item4,
  .item5 {
    display: none;
  }
}