feat: Add image descriptions to Slideshow and Public views

- Slideshow: Display imageDescription below image (centered overlay)
- PublicGroupImagesPage: Show descriptions in single-image mode
- ImageGalleryCard: Support description display in single-image mode

Phase 5-6 complete: Slideshow + Public Display Integration

frontend/src/Components/ComponentUtils/ImageGalleryCard.js

@@ -159,7 +159,7 @@ const ImageGalleryCard = ({
                 )}
                 
                 {/* Display-only mode: Show existing description */}
-                {!isEditMode && imageDescription && mode === 'preview' && (
+                {!isEditMode && imageDescription && (mode === 'preview' || mode === 'single-image') && (
                     <div className="image-description-display">
                         <em>{imageDescription}</em>
                     </div>

frontend/src/Components/Pages/PublicGroupImagesPage.js

@@ -52,7 +52,7 @@ const PublicGroupImagesPage = () => {
 
         <ImageGallery 
           items={group.images && group.images.length > 0 ? group.images.map(img => ({ 
-            ...img, // Pass all image fields including previewPath
+            ...img, // Pass all image fields including previewPath and imageDescription
             remoteUrl: `/download/${img.fileName}`, // Keep for backward compatibility
             originalName: img.originalName || img.fileName, 
             id: img.id 
@@ -61,6 +61,13 @@ const PublicGroupImagesPage = () => {
           enableReordering={false}
           mode="single-image"
           emptyMessage="Keine Bilder in dieser Gruppe."
+          imageDescriptions={group.images && group.images.length > 0 ? 
+            group.images.reduce((acc, img) => {
+              if (img.imageDescription) {
+                acc[img.id] = img.imageDescription;
+              }
+              return acc;
+            }, {}) : {}}
         />
       </Container>
 

frontend/src/Components/Pages/SlideshowPage.js

@@ -197,6 +197,28 @@ function SlideshowPage() {
     transition: `opacity ${TRANSITION_TIME}ms ease-in-out`
   };
 
+  const imageDescriptionSx = {
+    position: 'fixed',
+    bottom: '140px',
+    left: '50%',
+    transform: 'translateX(-50%)',
+    backgroundColor: 'rgba(0,0,0,0.7)',
+    p: '15px 30px',
+    borderRadius: '8px',
+    maxWidth: '80%',
+    textAlign: 'center',
+    backdropFilter: 'blur(5px)',
+    zIndex: 10002
+  };
+
+  const imageDescriptionTextSx = {
+    color: 'white',
+    fontSize: '18px',
+    margin: 0,
+    lineHeight: 1.4,
+    fontFamily: 'roboto'
+  };
+
   const descriptionContainerSx = {
     position: 'fixed',
     left: 40,
@@ -231,6 +253,13 @@ function SlideshowPage() {
       {/* Hauptbild */}
       <Box component="img" src={getImageSrc(currentImage, false)} alt={currentImage.originalName} sx={{ ...slideshowImageSx, opacity: fadeOut ? 0 : 1 }} />
 
+      {/* Bildbeschreibung (wenn vorhanden) */}
+      {currentImage.imageDescription && (
+        <Box sx={imageDescriptionSx}>
+          <Typography sx={imageDescriptionTextSx}>{currentImage.imageDescription}</Typography>
+        </Box>
+      )}
+
       {/* Beschreibung */}
       <Box sx={descriptionContainerSx}>
         {/* Titel */}