/* ================================================================== */
/* === 03/2026 zB. für QR-Codes "Aktuelles" und Bilder "Hofladen" === */
/* ================== Doorwaypage hat eigene CSS ==================== */


 
/* --- Einfacher hover Effekt für Bilder (Bilder mit eigenem Format, keine Quadrat-Grid-Matrix) --- */
 

/* Gemeinsame Basis für beide Bilder */
.hover-zoom {
  transition: transform 0.3s ease;
  /* display: block; */		/* verhindert kleine Layout-Sprünge */
}

/* Große Bilder – dezenter Hover */
.hover-zoom-big:hover {
  transform: scale(1.02);
}

/* Kleine Bilder – stärkerer Hover */
.hover-zoom-small:hover {
  transform: scale(1.05);
}

/* Kleine Bilder – Vergrößerungs-Hover. Effekt, um Bilder größer betrachten zu können - zB. in "Hofladen" */
.hover-zoom-strong:hover {
  position: relative;
  z-index: 1;
  transform: scale(1.7);
  box-shadow: 0px 0px 5px 8px white; /* --- Bilder Rahmen ---    box-shadow: 2px 4px 6px rgba(0,0,0,0.2)   --- */
}

/* ----------------------------- */




/* --- Bilder Schatten --- */
.img-shadow{
  box-shadow: 4px 8px 10px rgba(0,0,0,0.2);
}

.img-shadow-small {
  box-shadow: 2px 4px 6px rgba(0,0,0,0.2);
}




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


/* ============================================================
   BILDMATRIX (Hofladen)
   - Zeigt viele kleine Thumbnails in einem festen Grid.
   - 10 Spalten → funktioniert nur, wenn genug Platz vorhanden ist.
   - Moderne Browser brechen korrekt um, wenn der Container zu schmal ist.
   ============================================================ */
.bildmatrix {
  display: grid;
  grid-template-columns: repeat(10, 1fr); /* 10 gleich breite Spalten */
  gap: 5px;                                /* Abstand zwischen Thumbs */
  justify-items: center;                   /* Thumbs horizontal zentrieren */
}



/* ============================================================
   THUMBNAIL-BOX (Quadrat)
   - Fixe Thumbnail-Größe (65×65 px).
   - Position: relative → notwendig für das große Bild (absolute).
   - overflow: visible → das große Bild darf über die Box hinausragen.
   ============================================================ */
.img-box {
  width: 65px;
  height: 65px;
  position: relative;
  overflow: visible;
}



/* ============================================================
   THUMBNAIL (kleines Bild)
   - Füllt die Box vollständig.
   - object-fit: cover → quadratischer Zuschnitt.
   ============================================================ */
.img-box .thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}



/* ============================================================
   FULL-WRAP (großes Bild)
   - Absolut positioniert über dem Thumbnail.
   - Start: klein + transparent.
   - transform scale(0.2) → Startgröße.
   - pointer-events: none → verhindert Klickblockade.
   - display:flex → Bild bleibt perfekt zentriert.
   ============================================================ */
.full-wrap {
  position: absolute;
  top: 50%;
  left: 50%;

  width: 600px;      /* maximale Größe des großen Bildes */
  height: 600px;

  transform: translate(-50%, -50%) scale(0.2);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  z-index: 1;

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



/* ============================================================
   FULL (großes Bild selbst)
   - object-fit: contain → echtes Seitenverhältnis.
   - box-shadow → weißer Rahmen, der direkt am Bild sitzt.
   ============================================================ */
.full {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0px 0px 15px 20px white;
  box-sizing: border-box;
}



/* ============================================================
   HOVER-ZOOM (Desktop)
   - Weiches Einblenden + Vergrößern.
   - scale(0.5) → Zielgröße (anpassbar).
   ============================================================ */
.img-box:hover .full-wrap {
  opacity: 1;
  transform: translate(-50%, -50%) scale(0.5);
}



/* ============================================================
   SMARTPHONE-ZOOM (Erkennung von Touch-Gerät)
   - Hover existiert nicht → Tap wird als Hover interpretiert.
   - Hier kann die Zielgröße etwas größer sein.
   - (hover:none) = Touch-Geräte.
   ============================================================ */
@media (hover: none) {
  .img-box:hover .full-wrap {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.7); /* größerer Zoom auf Handy */
  }
}



/* ============================================================
   SMARTPHONE-ZOOM (Erkennung über Bildschirmbreite)
   - alternativ zur Erkennung über fehlende Hover-Möglichkeit
     bei Touch-Geräten
   ============================================================ */

@media (max-width:1000px) {
	.img-box:hover .full-wrap {
		opacity: 1;
		transform: translate(-50%, -50%) scale(0.7); /* größerer Zoom auf Handy */
	}
  
  
	.bildmatrix {
		grid-template-columns: repeat(5, 1fr); /* 10 gleich breite Spalten */
		gap: 5px;                                /* Abstand zwischen Thumbs */
	}
  
	.img-box {
		width: 130px;
		height: 130px;
	}
  
  
}