/* zusatz CSS: Hofladen-Seite  */






/* ================================================ 
      Einfacher hover Zoom Effekt für Bilder 
        in einer Reihe mit eigenem Format 
        (keine Quadrate-Grid-Matrix)       
   ================================================ */

/* Hinweis: Bildreihe für diese Seite (Hofladen).
   Prinzip überall nutzbar – nur die Höhen (auch MOBILE) 
   müssen je nach Bildmaterial angepasst werden. */

/* ============================================
   BILDREIHE – eine Zeile, flexible Breiten
   ============================================ */
.bildreihe {
  display: flex;
  gap: 10px;            /* Abstand zwischen Bildern */
  width: 100%;          /* volle Zeile */
  margin-bottom: 12px;  /* Abstand zur nächsten Reihe */
}

/* ============================================
   BILDER – gleiche Höhe, Ratio bleibt
   ============================================ */
.reihe-img {
  height: 191px;      /* Höhe so anpassen, dass die Breite genau Zeile füllt */
  width: auto;       
  object-fit: cover;  /* füllt die Höhe sauber (leichter Beschnitt) */
  border-radius: 6px; 
  transition: transform 0.3s ease; /* weicher Hover */
}

/* ============================================
   HOVER-ZOOM
   ============================================ */
.reihe-img:hover {
  transform: scale(1.8);     /* Zoom-Faktor */
  z-index: 2;                /* über Nachbarbilder legen */
  box-shadow: 0 0 10px 10px white; /* weißer Glow */
}

/* ============================================
   MOBILE – größere Höhe für bessere Wirkung
   ============================================ */
@media (max-width:1000px){
  .reihe-img {
    height: 235px;   /* mobile Thumbnail-Höhe */
    border-radius: 8px;
  }
}