/* CSS für galerie */

.galeriebild {
   /* Bild aus Anwendung, mit welchem die Galerie gestartet wird */
   cursor: zoom-in;
}

.gallery-overlay {
  /* Bereich am Ende vom main */
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.95);
   z-index: 999999;
   display: none; /* Wird via JS gesteuert */
   touch-action: none !important;
}

.gallery-container {
   position: relative;
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   touch-action: none !important; 
   overflow: hidden; 
}

.gallery-img {
   /* Das Bild in der Galerie */
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
   user-select: none;
   -webkit-user-drag: none;
   pointer-events: auto;     
   cursor: grab;   
   will-change: transform, opacity; /* fürs Handy */   
   transition: transform 0.3s ease, opacity 0.15s ease-in-out; /* registriert ein- und ausblenden */
   opacity: 1;
}
.gallery-img.fade-out {
   opacity: 0 !important; /* !important sichert ab, dass Mobil-Styles nicht überschrieben werden */
}
.gallery-img:active {
   cursor: grabbing;
}


.close-btn {
   /* Schliessen Kreuz oben rechts */
   position: absolute;
   top: 20px;
   right: 30px;
   color: white;
   font-size: 30px; /* Von 40px auf 30px verkleinert */
   cursor: pointer;
   z-index: 10000;
   line-height: 1;
}

.galerie-counter {
   /* Counter oben links (3/10 -> 3. Bild von total 10) */
   position: absolute;
   top: 20px;
   left: 30px;
   color: white;
   font-size: 16px;  
   z-index: 10000;
   line-height: 1;
}

.bild-beschriftung {
   /* Beschriftung unten am Rand */
   position: absolute;
   bottom: 20px;
   left: 0;
   right: 0;
   text-align: center;
   color: white;
   font-size: 16px;  
   z-index: 10000;
   line-height: 1;
}

.nav-btn {
   /* vorwärts und rückwärts Pfeil auf Desktop */
   /* mittig am linken und rechten Rand */
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background: rgba(0, 0, 0, 0.5);
   color: white;
   border: none;
   padding: 15px 20px;
   font-size: 24px;
   cursor: pointer;
   z-index: 10001;
   border-radius: 5px;
}
.prev-btn { left: 20px; }
.next-btn { right: 20px; }

.zoom-controls {
   /* Zooom-Leiste am rechten Rand vom Desktop */
   position: absolute;
   top: 100px; 
   right: 30px;
   display: flex;
   flex-direction: column;
   gap: 8px;
   z-index: 10001;
}
.zoom-controls button {
   /* Zoom-Buttons, gleich wie Close-Button */
   background: none;
   border: none;
   padding: 0;
   color: white;
   font-size: 30px;  
   cursor: pointer;
   line-height: 1;
   width: 30px;   
   height: 30px;
   display: flex;
   justify-content: center;
   align-items: center;
}

@media (pointer: coarse) {
   /* Pointer coarse (=ungenau) bedeutet Touch-Gerät */   
   
   .nav-btn, .zoom-controls {
      /* Zoom-Buttons ausblenden, da Zoom mit Gesten */
      display: none; 
   }  
  
   .close-btn {
      /* Schliessen-Kreuz vergrössern */
      font-size: 40px;
      top: 20px;    
      right: 25px;
   }
}