/* 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, BAUERNMARKT (1:1 wie PRODUKTE) – MIT MINI-KOMMENTAREN
   =========================================================================================== */


/* ============================================================
   FLEXIBLES GRID – Kachelgröße hier einstellen
   ============================================================ */
.bildmatrix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); /* 👈 Thumbnail-Größe, dadurch auch ANZAHL pro Reihe */
  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 */
}


/* ============================================================
   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 */
  border-radius: 10px;      /* 👈 runde Ecken */
}


/* ============================================================
   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
   ============================================================ */

/* ===========================================================================================
   ==============================    RESPONSIVE: MOBILE    ===================================
   =========================================================================================== */
@media (max-width:1000px){




  .bildmatrix {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* 👈 größere Kacheln, darüber auch ANZAHL pro Reihe einstellbar */
    gap: 12px;
  }




/* ============================================================
   BILDMATRIX – MOBILE BASIS-ZOOM
   - gilt für alle Bilder
   - wird später von Rand-Regeln überschrieben
   ============================================================ */

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

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

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



/* ============================================================
   RANDBILDER – MOBILE
   - Linke Spalte (1,5,9,...) → nach RECHTS zoomen
   - Rechte Spalte (4,8,12,...) → nach LINKS zoomen
   - Scale bleibt identisch zu den Basis-Zooms oben
   ============================================================ */

  /* -----------------------------------------
     LINKE SPALTE >> (Bild 1,5,9,...) → nach RECHTS (bei 4 Kacheln pro Zeile)
     🚩🚩🚩 Eben je nachdem, wieviele Kacheln eine Zeile in MOBILE-Ansicht hat
     ----------------------------------------- */

  /* Standard */
  .bildmatrix .img-box:nth-child(6n+1):hover .full-wrap { /* 👈 Hier Anpassen an die Anzahl der Kacheln pro Zeile, damit immer links und rechts außen ausgewählt werden */
    transform: translate(-20%, -50%) scale(1.3);
  }

  /* Querformat */
  .bildmatrix .img-box:nth-child(6n+1).quer:hover .full-wrap { /* 👈 Hier Anpassen */
    transform: translate(-05%, -50%) scale(1.6);
  }

  /* Hochformat */
  .bildmatrix .img-box:nth-child(6n+1).hoch:hover .full-wrap { /* 👈 Hier Anpassen */
    transform: translate(-30%, -50%) scale(1.1);
  }



  /* -----------------------------------------
     RECHTE SPALTE (4,8,12,...) → nach LINKS
     ----------------------------------------- */

  /* Standard */
  .bildmatrix .img-box:nth-child(6n):hover .full-wrap { /* 👈 Hier Anpassen */
    transform: translate(-80%, -50%) scale(1.3);
  }

  /* Querformat */
  .bildmatrix .img-box:nth-child(6n).quer:hover .full-wrap { /* 👈 Hier Anpassen */
    transform: translate(-95%, -50%) scale(1.6);
  }

  /* Hochformat */
  .bildmatrix .img-box:nth-child(6n).hoch:hover .full-wrap { /* 👈 Hier Anpassen */
    transform: translate(-70%, -50%) scale(1.1);
  }






/* ============================================================
   THUMBNAIL – MOBILE
   ============================================================ */
  .bildmatrix .thumb {
    border-radius: 14px;
  }

} /* Ende Mobile */