/* ==================================== */
        /* Grundeinstellungen */
        /* ==================================== */
        :root {
            --hover-transition: 0.3s ease-in-out; 
            /* Farbe für Hover-Overlay */
            --caption-bg: rgba(230, 230, 230, 0.9); 
            --text-color: #ea5c45;
        }

        /* ==================================== */
        /* Container & Track */
        /* ==================================== */
        .slider-container {
            max-width: 1024px; 
            margin: 0 auto; 
            overflow: hidden; 
            position: relative;
            cursor: grab; 
            touch-action: pan-y; 
            /* WICHTIG für Mobile: Kein Highlight beim Tappen */
            -webkit-tap-highlight-color: transparent;
        }
        
        .slider-container.grabbing {
            cursor: grabbing;
        }

        .slider-track {
            display: flex;
            will-change: transform;
            transform-style: preserve-3d; 
        }

        /* ==================================== */
        /* Items (3 Stück sichtbar) */
        /* ==================================== */
        .slider-item {
            /* Damit nichts schrumpft */
            flex-shrink: 0; 
            /* Exakt 1/3 der Containerbreite */
            width: 33.3333%; 
            /* Flex-Basis sicherheitshalber auch setzen */
            flex: 0 0 33.3333%;

            padding: 0 4px; /* Abstand zwischen Bildern */
            box-sizing: border-box; 
            position: relative;
        }

        /* Responsive Anpassung */
        @media (max-width: 768px) {
            .slider-item { width: 50%; flex: 0 0 50%; } /* 2 Bilder auf Tablets */
        }
        @media (max-width: 480px) {
            .slider-item { width: 100%; flex: 0 0 85%; } /* 1 Bild auf Handy; vorher 100% */
        }

        .slider-item a {
            display: block;
            text-decoration: none;
            /* Verhindert Geisterbilder beim Draggen */
            -webkit-user-drag: none;
        }
        
        
        .slider-item a:hover { border-bottom: none;  }
        
        /* ==================================== */
        /* Bild & Overlay Styling */
        /* ==================================== */
        .slider-item figure {
            margin: 0; 
            position: relative; 
            overflow: hidden; 
        }

        .slider-item img {
            width: 100%;
            height: auto;
            display: block;
            aspect-ratio: 3 / 4; 
            object-fit: cover; 
            pointer-events: none; 
            transition: transform var(--hover-transition), opacity var(--hover-transition), filter var(--hover-transition);
        }

        .slider-item figcaption {
            position: absolute;
            top: 0;
            left: 0;   
            width: 100%;
            height: 100%;
            
            display: flex; 
            flex-direction: column;
            justify-content: flex-end; 
            align-items: flex-start;
            
            padding: 0 26px 8px 12px;
            box-sizing: border-box;
            background-color: var(--caption-bg); 
            color: var(--text-color);
            
            color: #ea5c45;
            font-size: 2.6rem !important;
            font-weight: bold;
            line-height: 1;
            font-family: "Seria Sans W05 Bold", Helvetica, Arial, sans-serif;
            
            opacity: 0; 
            transition: opacity var(--hover-transition);
            
            z-index: 2; 
            cursor: grab; 
        }
        
        @media (max-width: 480px) { 
            .slider-item figcaption { font-size: 1.6rem; } 
        }
        
        .slider-item figcaption strong {
            display: block;
            margin-bottom: 5px;
        }

        /* ==================================== */
        /* Hover Logik (KORRIGIERT) */
        /* ==================================== */
        
        /* 
           ÄNDERUNG: Wir erlauben Hover-Effekte IMMER, wenn der User interagiert.
           Auch während des Draggens/Touchs (.grabbing).
           Das löst das Problem, dass die Caption verschwindet, wenn man auf Mobile den Finger draufhält.
        */
        .slider-container .slider-item a:hover img,
        .slider-container .slider-item a:active img,
        .slider-container.grabbing .slider-item a:hover img {
            opacity: 0.6; 
            filter: grayscale(100%); 
        }
        
        .slider-container .slider-item a:hover figcaption,
        .slider-container .slider-item a:active figcaption,
        .slider-container.grabbing .slider-item a:hover figcaption {
            opacity: 1; 
        }