/* =================================
   LoTeK Gallery
================================= */

/* Grundlayout */
body {
   background: #0f1115;
   color: #e6e6e6;
}

main {
   padding: 40px 0 60px 0;
}


.gallery-grid {
   width: 90%;
   text-align: center;     /* zentriert inline-block Kacheln */
   margin: 10px auto 40px auto;
   max-width: 1800px;
}


/* Einzelne Kachel */
.gallery-item {
   position: relative;
   display: inline-block;   /* statt float */
   vertical-align: top;
   width: 400px;
   height: 400px;
   margin: 12px;
   border: 1px solid #ffffff;
   background: #14171c;
   overflow: hidden;
   transition:
      transform 0.5s ease,
      border-color 0.5s ease,
      box-shadow 0.5s ease;
}


/* Bild absolut zentriert */
.gallery-item img,
.gallery-item .img-wrapper img {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   max-width: 100%;
   max-height: 100%;
   width: auto;
   height: auto;
   display: block;
}


/* Hover Effekt */
.gallery-item:hover {
   transform: scale(1.03);
   border-color: #8aaed6;
   box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}


/* Caption (nur Kategorie-Seite) */
.gallery-caption {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   padding: 8px 0;
   background: rgba(0,0,0,0.65);
   color: #e6e6e6;
   font-size: 0.9rem;
   text-align: center;
}

.img-wrapper {
   position: static;
}

.img-overlay {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 40px;
   background: rgba(0,0,0,0.65);
   color: #ffffff;
   font-size: 0.75rem;
   display: flex;
   align-items: center;
   justify-content: center;

   transform: translateY(100%);
   transition: transform 1s ease-in-out;

   pointer-events: none;
}

.gallery-item:hover .img-overlay {
   transform: translateY(0);
}