/* @package PCWIN IT - CODE CSS 
 * @author & Copyright PCWIN KALLABA – All rights reserved | Powered by PCWIN IT BUSINESS (https://pcwin.ch)
 * @note FILE DO NOT MODIFY! */
.premium-gallery-wrapper { position: relative; max-width: 1100px; margin: 40px auto; display: flex; align-items: center; gap: 15px; }
/* Versteckt die Bilder, die gerade nicht dran sind */
.gallery-container { overflow: hidden; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); flex: 1; }
/* Die "Schiene", auf der sich die Bilder bewegen */
.gallery-track { display: flex; transition: transform 0.6s ease-in-out; }
/* Jedes einzelne Bild (nimmt 100% des Platzes ein) */
.gallery-slide { min-width: 100%; box-sizing: border-box; }
.gallery-slide img { width: 100%; height: auto; display: block; }
/* Styling der Buttons (Pfeile) */
.gallery-btn { background-color: #0056b3; color: white; border: none; border-radius: 50%; width: 45px; height: 45px; font-size: 20px; cursor: pointer; transition: background-color 0.3s; display: flex; justify-content: center; align-items: center; }
.gallery-btn:hover { background-color: #003d82; }
/* Für Smartphones: Pfeile etwas kleiner machen */
@media (max-width: 600px) { .gallery-btn { width: 35px; height: 35px; font-size: 16px; } }
/* Zeigt eine Lupe als Mauszeiger über den Galerie-Bildern */
.gallery-slide img { cursor: zoom-in; }
/* --- Lightbox / Vergrösserung Styles --- */
.lightbox-overlay { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); align-items: center; justify-content: center; }
/* Das vergrösserte Bild in der Lightbox */
.lightbox-content { max-width: 90%; max-height: 90vh; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.5); animation: zoomIn 0.3s ease; }
/* Animation */
@keyframes zoomIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* Das "X" zum Schliessen */
.lightbox-close { position: absolute; top: 20px; right: 35px; color: white; font-size: 40px; font-weight: bold; cursor: pointer; transition: color 0.3s; }
.lightbox-close:hover { color: #cccccc; }
/* --- Styling für die neuen Lightbox-Pfeile --- */
.lightbox-btn { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0, 0, 0, 0.5); color: white; border: none; font-size: 40px; padding: 10px 20px; cursor: pointer; border-radius: 8px; transition: background-color 0.3s; z-index: 10000; }
.lightbox-btn:hover { background-color: rgba(0, 0, 0, 0.9); }
/* Position links und rechts */
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
/* Für Smartphones die Pfeile etwas verkleinern */
@media (max-width: 600px) { .lightbox-btn { font-size: 24px; padding: 8px 15px; } }