/*Für Seite Varianten:
-Bild links, Text rechts
-Mobile (<600px): Bild oben, Text darunter
-Hover-Zoom der Bilder
*/


/* ===== Layout: Bild + Text ===== */
.image-text {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

/* Bild (Desktop) */
.image-text img {
  width: 170px;
  height: 200px;   /*170px*/
  flex-shrink: 0;
}

/* ===== Hover-Effekt (nur Desktop sinnvoll) ===== */
.imgcenterHover {
  max-width: 100%;
  height: auto;
  padding: 1px;
  box-sizing: border-box;
  transition: transform 0.3s ease;
  cursor: zoom-in;
}

.imgcenterHover:hover {
  transform: scale(2.8);
  z-index: 10;
}

/*====== Bildunterschrift======*/
.clear{
      clear: both;
      /*background-color: rgb(10, 10, 10);*/
      height: 40px;
      margin: 15px;
    }
      .gallery {
        margin: 30px;
        border: 1px solid #ccc;
        float: left;
        width: 180px;
      }
      .desc {
        padding: 15px;
        text-align: center;
      }
      .gallery:hover {
        border: 1px solid #777;
      }      
      .gallery img {
        width: 100%;
        height: auto;
      }
      

/* ===== 📱 Mobile Anpassung ===== */
@media (max-width: 600px) {

  .image-text {
    flex-direction: column;
    align-items: center;
  }

  .image-text img {
    height: 170px;     /* FIX: ohne Leerzeichen! */
    width: auto;
    max-width: none;   /* verhindert Überschreiben */
  }

  /* Hover komplett deaktivieren */
  .imgcenterHover {
    cursor: default;
    transition: none;
  }

  .imgcenterHover:hover {
    transform: none;
  }
}