/* CSS Document */

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}
.zoom-img {
  width: 100%;
  max-width: 300px; /* Thumbnail Größe */
  height: auto;
  transition: transform 0.3s ease; /* Weicher Übergang */
  cursor: pointer;
}
.zoom-img:hover {
  transform: scale(1.5); /* Vergrößert das Bild um 50% */
  z-index: 10; /* Bringt das Bild in den Vordergrund */
}




/* VA hover effekt, aber nicht responsibel */

.galerie-bild {
    transition: transform 0.3s ease; /* Sanfter Übergang */
    width: 200px; /* Ursprüngliche Größe */
border:solid 1px #1C3C63;
}
.galerie-bild:hover {
    transform: scale(2.5); /* Bild vergrößern */
    z-index: 10; /* Bild über andere Elemente legen */
    position: relative;
border:solid 1px #1C3C63;
}




/* lflex item group */

* {
  box-sizing: border-box;
}

.flex-container {
  display: flex;
  flex-direction: row;
  margin-bottom:15px;
}

.flex-item1 {
  background-color: #1C3C63;
  padding: 10px;
  font-size: 20px;
  font-weight:bold;
  color: #ffffff;
  text-align: left;
  border-radius: 10px;
  min-width:12%;
}

.flex-item2 {
  background-color: #EBECED;
  padding: 10px;
  margin-left: 5px;
  font-size: 16px;
  text-align: left;
  min-width:68%;
  border-radius: 10px;

}

.flex-item3 {
  background-color: #F0F1F2;
  padding: 10px;
  margin-left:5px;
  text-align: center;
  border-radius: 10px;
}

.vatitel2{
   font-size: 18px;
   color:#1C3C63;
   font-weight:bold;
margin: 0 0 15px 0;

}


/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */

@media (max-width: 600px) {
  .flex-container {
    flex-direction: column;
  }

.flex-item2 {
  margin-left:0px;
  margin-top:5px;
}

.flex-item3 {
  margin-left:0px;
  margin-top:5px;
}

}

.vaimg{
	border:solid 1px #1C3C63;
}