/* zusatz CSS für Foto Grid/Gitter, Schatten, Hover-Zoom-Effekte: 
  verwendet zB. auf Hofladen-, Bauernmarkt-Seite  */


/* ================================================================== */
/* ============= 03/2026 zB. für Bilder "Hofladen" ================== */
/* ================== Doorwaypage hat eigene CSS ==================== */


/* ===== weitere Bilder Reihe, Matrix zB. in "Hofladen" ===== */




/* ===========================================================================================
   BILDMATRIX – HOFLADEN, BUERNMARKT (1:1 wie PRODUKTE) – MIT MINI-KOMMENTAREN
   =========================================================================================== */


/* ============================================================
   FLEXIBLES GRID – Kachelgröße hier einstellen
   ============================================================ */
.bildmatrix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)); /* Thumbnail-Größe */
  gap: 10px;                                                  /* Abstand */
  width: 100%;
  box-sizing: border-box;
  justify-items: center;
}


/* ============================================================
   THUMBNAIL-BOX – Quadrat + Hover-Container
   ============================================================ */
.bildmatrix .img-box {
  width: 100%;
  aspect-ratio: 1 / 1;     /* echtes Quadrat */
  position: relative;
  overflow: visible;       /* Zoom darf rausstehen */
  border-radius: 6px;      /* runde Ecken               >> UNNÖTIG ???*/

 min-height: 0; /*  ⚠️ Versuch gegen "Grid-Sprünge (Pulsieren-Phänomen bei CC)*/
}


/* ============================================================
   THUMBNAIL (kleines Bild)
   ============================================================ */
.bildmatrix .thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* füllt das Quadrat */
  border-radius: 4px;      /* runde Ecken */
  display: block;
}


/* ============================================================
   FULL-WRAP – großes Bild (Startgröße hier!)
   ============================================================ */
.bildmatrix .full-wrap {
  position: absolute;
  top: 50%;
  left: 50%;

  width: 350px;            /* Startbreite des Zoom-Bildes (wie Produkte) */
  height: auto;            /* WICHTIG: keine feste Höhe → Zoom funktioniert sauber */

  transform: translate(-50%, -50%) scale(0.2); /* Start-Zoom */
  opacity: 0;                                   /* unsichtbar bis Hover */
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  z-index: 99;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: visible;        /* Schatten sichtbar */
  border-radius: 10px;      /* runde Ecken */
}


/* ============================================================
   FULL (großes Bild)
   ============================================================ */
.bildmatrix .full {
  width: 100%;              /* passt sich der Full-Wrap-Breite an */
  height: auto;             /* behält Seitenverhältnis */
  object-fit: contain;      /* zeigt komplettes Bild */
  box-shadow: 0 0 15px 20px white; /* weißer Glow */
}


/* ============================================================
   DESKTOP-ZOOM – Zoomstärken hier einstellen
   ============================================================ */
@media (hover:hover){

  .bildmatrix .img-box:hover .full-wrap {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.75);   /* Standard-Zoom Desktop */
  }

  .bildmatrix .img-box.quer:hover .full-wrap {
    transform: translate(-50%, -50%) scale(0.9);    /* Querformat-Zoom */
  }

  .bildmatrix .img-box.hoch:hover .full-wrap {
    transform: translate(-50%, -50%) scale(0.6);    /* Hochformat-Zoom */
  }

}


/* ============================================================
   MOBILE-ZOOM – Zoomstärken hier einstellen
   ============================================================ */
@media (max-width:1000px)  {   /* , (hover:none)  ⚠️ mal 2 Bedingungen mit "ODER" verknüpft >> Versuch gegen "Grid-Sprünge (Pulsieren-Phänomen bei CC) */

  .bildmatrix {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* größere Kacheln */
    gap: 12px;
  }

  .bildmatrix .img-box:hover .full-wrap {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.3);    /* Standard-Zoom Mobile */
  }

  .bildmatrix .img-box.quer:hover .full-wrap {
    transform: translate(-50%, -50%) scale(1.6);    /* Querformat-Zoom Mobile */
  }

  .bildmatrix .img-box.hoch:hover .full-wrap {
    transform: translate(-50%, -50%) scale(1.1);    /* Hochformat-Zoom Mobile */
  }



   /* THUMBNAIL (kleines Bild) */
  .bildmatrix .thumb {
    border-radius: 14px;      /* runde Ecken */
  }



  
}