/* CSS für galerie */

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

.gallery-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;          /* Exakte Breite des sichtbaren Handy-Displays */
   max-width: 100vw;      /* Verhindert Überbreite durch die Hauptseite */
   height: 100dvh;        /* Exakte Höhe des sichtbaren Handy-Displays */
   max-height: 100dvh;    /* Verhindert das Rutschen der Beschriftung nach unten */
   background-color: rgba(0, 0, 0, 0.95);
   z-index: 99999;
   display: none;
   overflow: hidden;
   touch-action: none !important;
}


.gallery-container {
   position: fixed; /* Besser als relative für ein Vollbild-Overlay */
   top: 0;
   left: 0;
   width: 100vw;
   height: 100dvh; /* Passt sich der Handy-Adressleiste dynamisch an */
   display: flex;
   justify-content: center;
   align-items: center;
   touch-action: none !important; 
   overflow: hidden;
   z-index: 1; 
}

.gallery-img {
   max-width: 90vw;
   max-height: 90dvh; /* Verhindert Abschneiden/Verschieben unten */
   width: auto;
   height: auto;
   object-fit: contain;
   transform-origin: center center; /* Zwingt den Zoom- und Schiebepunkt exakt in die Mitte */
   user-select: none;
   -webkit-user-drag: none;
   pointer-events: auto;     
   will-change: transform, opacity;
   transition: transform 0.3s ease, opacity 0.15s ease-in-out;
   opacity: 1;
}

.gallery-img.fade-out {
   opacity: 0 !important; /* !important sichert ab, dass Mobil-Styles nicht überschrieben werden */
}

.gallery-img.is-grabbable {
   /* zeigt auf Desktop den Cursor als Fäustchen, sobald das Bild verschiebbar ist */
   /* siehe galerie.js -> function updateImageTransform */
  cursor: grab;
}
.gallery-img.is-grabbable:active {
   /* sobald gezogen wird, ist das Fäustchen kleiner */
   cursor: grabbing;
}

.close-btn {
   /* weitere styles siehe galerie.js -> positioniereGalerieElemente */
   position: fixed;
   color: white;
   cursor: pointer;
   z-index: 999999;
   line-height: 1;
   padding: 0 10px;  /* links und rechts */
   user-select: none;
}

.bild-beschriftung {
   /* weitere styles siehe galerie.js -> positioniereGalerieElemente */
   position: fixed;
   left: 0;
   padding: 0 20px;
   box-sizing: border-box; /* Rechnet das Padding sauber in die JS-Breite mit ein */
   text-align: center;
   word-wrap: break-word;
   color: white;
   font-size: 16px;
   z-index: 999999;
   line-height: 1.4;
   pointer-events: none;
}
.bild-beschriftung a {
   /* Bildbeschriftungen dürfen Hyperlinks enthalten */
   /* Siehe Beispiel iFarne - Adlerfarn */
   color: white;
   pointer-events: auto;
}


.galerie-counter {
   /* Counter oben links (3/10 -> 3. Bild von total 10) */
   position: fixed;
   top: max(25px, env(safe-area-inset-top));
   left: 25px;
   color: white;
   font-size: 16px;  
   z-index: 10;
   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; 
   }    

}