.gallery{
	width:100%;
	position:relative;
}
.gallery:after{
	content:'';
	display:block;
	clear:both;
}

.gallery-menu{
	float:left;
	width:20%;
	min-width:100px;
	/*border-radius:6px;
	background-color:#fafafa;
	padding:10px;
	padding-left:20px;
	*/
	padding-right:20px;
	margin-bottom:20px;
	border-right:1px solid #eeeeee;

	box-sizing:border-box;
}
.gallery-menu hr{
	margin:0;
	margin-bottom:10px;
}

.gallery-menu ul{
	list-style-type: none;
	margin-bottom:0;
}
.gallery-menu li{
	margin-bottom:0.1rem;
	list-style-position:outside;
}
.gallery-menu li.level1{
	margin-left:0px;
}
.gallery-menu li.level2{
	margin-left:30px;
	list-style-image: url('images/substruktur.gif');
}
.gallery-menu li a:link,.gallery-menu li a:visited{
	text-decoration:none;
	color:#999999;
}
.gallery-menu li a:hover,.gallery-menu li a:active{
	text-decoration:none;
	color:#777777;
}
.gallery-menu li.active a{
	font-weight:700;
	color:#000000;
}

.gallery-title{
	border-bottom:1px solid #cccccc;
	margin-bottom:10px;
}
.gallery-title h2{
	margin-bottom:10px;
}

/* Images */
.gallery-images{
	float:left;
	width:80%;
	box-sizing:border-box;
	padding-left:20px;
}
.gallery-images-full{
	width:100%;
	padding-left:0;
}
.gallery-image-box, .gallery-subgallery{
	width:23%;
	margin:1%;
	/* height:0; */
	/* padding-bottom:23%; */
	position:relative;
	display:inline-block;
	box-sizing:border-box;
	vertical-align:top;
}

.gallery-image-box a:first-child, .gallery-subgallery a:first-child{
	box-shadow:2px 2px 12px #eeeeee;
	display:block;
	width:100%;
	overflow:hidden;
	padding:7px;
	box-sizing:border-box;
	background:#ffffff;
}

.gallery-image, .gallery-subgallery-image{
	width:100%;
	height:0;
	line-height:0;
	padding-bottom:100%;
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	box-sizing:border-box;
	transition:0.4s;
}
.gallery-subgallery-title{
	margin:0 15px;
	margin-top:5px;
	text-align:center;
	font-weight:700;
	line-height:1.3em;
}
.gallery-image-title{
	margin:0 5px;
	text-align:left;
	font-weight:400;
	line-height:1.3em;
	margin-top:5px;
}
.gallery-image-description{
	margin:0 5px;
	text-align:left;
	font-weight:400;
	line-height:1.3em;
	margin-top:5px;
	font-size:0.8em;
}

.gallery-slider .gallery-image-title{
	position:absolute;
	left:0;
	right:0;
	bottom:0px;
	margin:0;
	padding:10px 10px;
	background-color:rgba(255,255,255,0.8);
}
.gallery-slider .gallery-image-box a:first-child{
	box-shadow:none;
	padding:0;
}
.gallery-menu-icon{
	display:none;
}

@media (max-width:1000px){
	.gallery-menu{
		width:100%;
		padding-left:0;
		display:none;
		border:0;
	}
	.gallery-images{
		width:100%;
		padding-left:0;
	}
	.gallery-menu-icon{
		display:block;
		width:220px;
		padding:8px 16px;
		background-color:#cccccc;
		background-image:url('images/menu-icon.png');
		background-repeat:no-repeat;
		background-position:95% 50%;
		box-sizing:border-box;
		color:#ffffff;
		margin-bottom:20px;
		cursor:pointer;
	}
}


@media (max-width:550px){
	.gallery-image-box, .gallery-subgallery{
		width:46%;
		margin:2%;
		/* padding-bottom:46%; */
	}
}

/* Overwrite padding */
.gallery-subgallery{
	margin-bottom:20px;
	/* background-color:#d0d0d0; */
}

/* Slide gallery */
.gallery-slider .gallery-image-box{
	height:200px;
	padding-bottom:0;
	margin:0;
}
.gallery-slider .gallery-image{
	height:200px;
	padding-bottom:0;
}
/* Grid gallery */

.gallery-grid{
	overflow:hidden;
}	
.gallery-grid .gallery-subgallery{
	padding-bottom:0;
	line-height:0;
}
.gallery-grid .gallery-subgallery-title{
	position:absolute;
	bottom:0;
	padding:10px;
	line-height:1.2em;
	background:rgba(0,0,0,0.5);
	display:block;
	margin:0;
	width:100%;
	box-sizing:border-box;
}

.gallery-grid .gallery-subgallery a {
	display:block;
}

.gallery-grid .gallery-subgallery, .gallery-grid .gallery-image-box{
	height:auto;
	width:25%;
}	
.gallery-grid .gallery-subgallery-image, .gallery-grid .gallery-image{
	padding:0;
}	

.gallery-grid .gallery-image-box a:first-child, .gallery-grid .gallery-subgallery a:first-child{
	padding:0;
}

.gallery-grid .gallery-image:hover{
	transform:scale(1.05,1.05);
}
/* dyn gallery */
.gallery-dyn-container{
	position:relative;
	overflow:hidden;
}
.gallery-dyn-outer{
	position:relative;
}
.gallery-dyn-images{
	position:relative;
}
.gallery-dyn-images .gallery-image-box{
	position:absolute;
	margin:0;
}
.gallery-dyn-next,.gallery-dyn-prev {
	position:absolute;
	width:50px;
	height:45px;
	z-index:10;
	cursor:pointer;
}
.gallery-dyn-prev{
	left:0;
	background-image:url('../../images/prev.png');
}
.gallery-dyn-next{
	right:0;
	background-image:url('../../images/next.png');
}
.gallery-dyn-prev._outside{
	left:-70px;
}
.gallery-dyn-next._outside{
	right:-70px;
}
/* css grid **/
.gallery-cssgrid {
  display: grid;
  gap: 2px; /* gap between items */
  grid-template-columns: repeat(1, 1fr); /* default 1 column */
}

/* 2 columns for >=600px */
@media (min-width: 600px) {
  .gallery-cssgrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 3 columns for >=1200px */
@media (min-width: 1200px) {
  .gallery-cssgrid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 4 columns for >=1600px */
@media (min-width: 1600px) {
  .gallery-cssgrid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.gallery-cssgrid .gallery-image-box {
  /* Make each box stretch and handle aspect ratio as needed */
  width: 100%;
  height: auto;
  display:block;
  margin:0;
  padding:0;
  overflow:hidden;

  opacity:0;
  transform: translateY(20px); /* optional small slide-in effect */
  transition: opacity 0.6s ease, transform 0.6s ease;

  /* Optional: add styling like border, background, etc. */
}
.gallery-cssgrid .gallery-image-box._show {
  opacity: 1;
  transform: translateY(0);
}
.gallery-cssgrid .gallery-image-box a:first-child, .gallery-cssgrid .gallery-subgallery a:first-child {
  box-shadow: none;
  padding:0;
  background:transparent;
  line-height:0;
  overflow:visible;
}
.gallery-cssgrid .gallery-image {
  width: 100%;
  height: auto;
  padding:0;
  object-fit:cover;
  aspect-ratio:2;
  transition:scale 0.3s;
  scale:1.0;
}
.gallery-cssgrid .gallery-image-title{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:0;
  padding:10px;
  box-sizing: border-box;
  background-color:rgba(0,0,0,0.5);
  color:#ffffff;
  text-align:center;
  display:flex;
  flex-flow:column nowrap;
  justify-content: center;
  opacity:0;
  transition:opacity 0.3s;
}
.gallery-cssgrid .gallery-image-title:hover {
  opacity:1;
}
.gallery-cssgrid .gallery-image-box:hover .gallery-image{
  scale:1.15;
}