{"id":393,"date":"2025-04-04T12:46:29","date_gmt":"2025-04-04T12:46:29","guid":{"rendered":"https:\/\/barkwende.de\/?page_id=393"},"modified":"2025-04-10T10:17:53","modified_gmt":"2025-04-10T10:17:53","slug":"unsere-errungenschaften","status":"publish","type":"page","link":"https:\/\/barkwende.de\/en\/unsere-errungenschaften\/","title":{"rendered":"Our achievements"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"393\" class=\"elementor elementor-393\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fa23fad e-con-full e-flex e-con e-parent\" data-id=\"fa23fad\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-87d3635 elementor-widget elementor-widget-html\" data-id=\"87d3635\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t <!-- Introduction -->\n    <section class=\"container mx-auto px-4 py-12\">\n        <div class=\"max-w-3xl mx-auto text-center\">\n            <h2 class=\"text-3xl font-serif font-bold text-barkwende mb-6\">Nos moments en images<\/h2>\n            <p class=\"text-lg mb-8\">D\u00e9couvrez les temps forts de nos activit\u00e9s \u00e0 travers cette galerie de photos organis\u00e9e par \u00e9v\u00e9nement. Chaque image raconte une histoire du travail humanitaire de BARKWENDE e.V.<\/p>\n            <div class=\"w-24 h-1 bg-barkwende mx-auto rounded-full\"><\/div>\n        <\/div>\n    <\/section>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-988dade e-con-full e-flex e-con e-parent\" data-id=\"988dade\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3a84375 elementor-widget elementor-widget-html\" data-id=\"3a84375\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n    <script>\n        tailwind.config = {\n            theme: {\n                extend: {\n                    colors: {\n                        'barkwende': '#8B2323',\n                        'barkwende-dark': '#8C3200',\n                        'barkwende-light': '#E0A080',\n                    }\n                }\n            }\n        }\n    <\/script>\n    <style>\n        \/* Styles globaux pour toutes les sections *\/\n        .star-decoration {\n            position: absolute;\n            width: 12px;\n            height: 12px;\n            background: white;\n            border-radius: 50%;\n            box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.8);\n            opacity: 0.6;\n        }\n        \n        .star-decoration::before,\n        .star-decoration::after {\n            content: '';\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            background: white;\n            box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.8);\n        }\n        \n        .star-decoration::before {\n            width: 24px;\n            height: 2px;\n            margin-left: -12px;\n            margin-top: -1px;\n        }\n        \n        .star-decoration::after {\n            width: 2px;\n            height: 24px;\n            margin-left: -1px;\n            margin-top: -12px;\n        }\n        \n        \/* Styles pour les miniatures - dimensions fixes *\/\n        .photo-thumbnail {\n            transition: all 0.3s ease !important;\n            position: relative !important;\n            overflow: hidden !important;\n            box-sizing: border-box !important;\n            border: 2px solid white !important;\n            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;\n            border-radius: 0.5rem !important;\n            cursor: pointer !important;\n        }\n        \n        \/* Force l'aspect-ratio sur les miniatures *\/\n        .photo-thumbnail img {\n            width: 100% !important;\n            height: 100% !important;\n            object-fit: cover !important;\n            display: block !important;\n        }\n        \n        \/* Miniatures dans la grille principale *\/\n        .grid .photo-thumbnail {\n            width: 100% !important;\n            height: auto !important;\n        }\n        \n        \/* Miniatures dans la grille avec aspect carr\u00e9 *\/\n        .grid .photo-thumbnail .aspect-square {\n            aspect-ratio: 1\/1 !important;\n        }\n        \n        \/* Force la hauteur des miniatures panoramiques *\/\n        .photo-thumbnail.h-32 {\n            height: 8rem !important;\n        }\n        \n        \/* Miniatures polaroid en bas *\/\n        .w-16.h-16 {\n            width: 4rem !important;\n            height: 4rem !important;\n            min-width: 4rem !important;\n            min-height: 4rem !important;\n            max-width: 4rem !important;\n            max-height: 4rem !important;\n        }\n        \n        @media (min-width: 768px) {\n            .md\\:w-20.md\\:h-20 {\n                width: 5rem !important;\n                height: 5rem !important;\n                min-width: 5rem !important;\n                min-height: 5rem !important;\n                max-width: 5rem !important;\n                max-height: 5rem !important;\n            }\n        }\n        \n        .photo-thumbnail:hover {\n            transform: scale(1.03) !important;\n            z-index: 10 !important;\n        }\n        \n        \/* Hauteur fixe pour certaines miniatures *\/\n        .h-64 {\n            height: 16rem !important;\n            min-height: 16rem !important;\n        }\n        \n        .lightbox {\n            display: none;\n            position: fixed;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background-color: rgba(0, 0, 0, 0.9);\n            z-index: 1000;\n            justify-content: center;\n            align-items: center;\n            opacity: 0;\n            transition: opacity 0.3s ease;\n        }\n        \n        .lightbox.active {\n            display: flex;\n            opacity: 1;\n        }\n        \n        .lightbox-content {\n            position: relative;\n            max-width: 90%;\n            max-height: 90%;\n        }\n        \n        .lightbox-img {\n            max-width: 100%;\n            max-height: 90vh;\n            object-fit: contain;\n            border: 4px solid white;\n            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);\n            transition: transform 0.3s ease;\n        }\n        \n        .lightbox-close, .lightbox-prev, .lightbox-next {\n            background: rgba(255, 255, 255, 0.2);\n            border-radius: 50%;\n            width: 40px;\n            height: 40px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            cursor: pointer;\n            transition: background 0.3s ease;\n        }\n        \n        .lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover {\n            background: rgba(255, 255, 255, 0.4);\n        }\n        \n        .zoom-icon {\n            position: absolute;\n            bottom: 10px;\n            right: 10px;\n            background: rgba(255, 255, 255, 0.7);\n            border-radius: 50%;\n            width: 30px;\n            height: 30px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            opacity: 0;\n            transition: opacity 0.3s ease;\n        }\n        \n        .photo-thumbnail:hover .zoom-icon {\n            opacity: 1;\n        }\n        \n        @keyframes float {\n            0%, 100% {\n                transform: translateY(0) rotate(0);\n            }\n            50% {\n                transform: translateY(-8px) rotate(3deg);\n            }\n        }\n        \n        .animate-float {\n            animation: float 6s ease-in-out infinite;\n        }\n        \n        .caption-overlay {\n            background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);\n        }\n    <\/style>\n<div class=\"bg-gray-100 font-sans text-gray-800\">\n    \n    \n<!-- SECTION 2: Galerie Mediathek -->\n<section class=\"py-20 bg-gray-50\">\n    <!-- En-t\u00eate de section avec animation l\u00e9g\u00e8re -->\n    <div class=\"container mx-auto px-4 mb-12\">\n        <div class=\"text-center max-w-3xl mx-auto\">\n            <span class=\"text-red-900 font-semibold tracking-wider uppercase relative inline-block before:content-[''] before:absolute before:h-0.5 before:w-12 before:bg-red-900 before:-left-16 before:top-1\/2 after:content-[''] after:absolute after:h-0.5 after:w-12 after:bg-red-900 after:-right-16 after:top-1\/2\">Galerie<\/span>\n            <h2 class=\"text-4xl font-bold text-gray-900 mt-3 mb-6\">Unsere Mediathek<\/h2>\n            <p class=\"text-xl text-gray-600\">Entdecken Sie unsere Projekte und Aktivit\u00e4ten in Bildern<\/p>\n        <\/div>\n    <\/div>\n\n    <!-- Contenu principal avec design similaire au Festival Barkwende -->\n    <div id=\"gallery\" class=\"container mx-auto px-4 py-8 max-w-7xl\">\n        <div class=\"bg-white rounded-2xl shadow-2xl overflow-hidden transform transition-all duration-700 hover:shadow-[0_25px_50px_-12px_rgba(0,0,0,0.2)] relative\">\n            <!-- D\u00e9coration de fond subtile -->\n            <div class=\"absolute inset-0 overflow-hidden opacity-5\">\n                <div class=\"absolute top-0 left-0 w-full h-full\">\n                    <div class=\"absolute top-10 left-[10%] w-20 h-20 rounded-full bg-barkwende opacity-40\"><\/div>\n                    <div class=\"absolute bottom-20 right-[20%] w-32 h-32 rounded-full bg-barkwende-light opacity-30\"><\/div>\n                    <div class=\"absolute top-1\/3 right-[40%] w-16 h-16 rounded-full bg-barkwende-dark opacity-20\"><\/div>\n                <\/div>\n            <\/div>\n\n            <!-- En-t\u00eate de la galerie avec d\u00e9grad\u00e9 am\u00e9lior\u00e9 -->\n            <div class=\"relative h-40 md:h-48 bg-barkwende overflow-hidden\">\n                <!-- Motif de fond -->\n                <div class=\"absolute inset-0 opacity-20\">\n                    <div class=\"absolute top-5 left-10 star-decoration animate-float\"><\/div>\n                    <div class=\"absolute bottom-16 right-10 star-decoration animate-float\" style=\"animation-delay: 1s;\"><\/div>\n                    <div class=\"absolute top-16 right-36 star-decoration animate-float\" style=\"animation-delay: 2s;\"><\/div>\n                    <div class=\"absolute bottom-5 left-36 star-decoration animate-float\" style=\"animation-delay: 3s;\"><\/div>\n                <\/div>\n                \n                <!-- D\u00e9grad\u00e9 am\u00e9lior\u00e9 -->\n                <div class=\"absolute inset-0 bg-gradient-to-r from-barkwende-dark via-barkwende to-barkwende-light opacity-80\"><\/div>\n                \n                <!-- Contenu de l'en-t\u00eate -->\n                <div class=\"relative z-10 h-full flex items-center\">\n                    <div class=\"px-8 py-4 max-w-3xl\">\n                        <h2 class=\"text-lg font-medium !text-white\/90 mb-2 tracking-wider uppercase\">Fotodokumentation<\/h2>\n                        <h3 class=\"text-4xl md:text-5xl font-serif font-bold !text-white mb-4 drop-shadow-lg\">Unsere Mediathek<\/h3>\n                        <p class=\"text-white\/80 text-lg max-w-2xl font-light\">Bilder und Momente aus unseren Projekten in Burkina Faso<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"px-6 py-8 md:px-10\">\n                <!-- Grille de photos avec design responsive am\u00e9lior\u00e9 -->\n                <div class=\"grid grid-cols-2 md:grid-cols-4 gap-3 mb-6\">\n                    <h3 class=\"col-span-full text-xl font-serif font-bold text-gray-800 mb-1\">Projektgalerie<\/h3>\n                    \n                    <!-- Photos cliquables avec style du Festival Barkwende -->\n                    <div class=\"photo-thumbnail relative rounded-lg overflow-hidden shadow-md border-2 border-white group cursor-pointer gallery-thumbnail\" data-photo=\"0\">\n                        <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/02\/2413b941-78c5-4f2d-ba45-1dc829ed33cb.jpeg\" \n                             alt=\"Gemeinschaftsinitiative\" \n                             class=\"w-full h-full object-cover aspect-square\">\n                        <div class=\"absolute top-0 left-0 bg-barkwende\/80 text-white text-xs font-bold py-1 px-2 rounded-br z-10\">01<\/div>\n                        <div class=\"zoom-icon\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                            <\/svg>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"photo-thumbnail relative rounded-lg overflow-hidden shadow-md border-2 border-white group cursor-pointer gallery-thumbnail\" data-photo=\"1\">\n                        <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/02\/ff76e076-a524-4be6-a229-7e7bdd380f33.jpeg\" \n                             alt=\"Wasserversorgung\" \n                             class=\"w-full h-full object-cover aspect-square\">\n                        <div class=\"absolute top-0 left-0 bg-barkwende\/80 text-white text-xs font-bold py-1 px-2 rounded-br z-10\">02<\/div>\n                        <div class=\"zoom-icon\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                            <\/svg>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"photo-thumbnail relative rounded-lg overflow-hidden shadow-md border-2 border-white group cursor-pointer gallery-thumbnail\" data-photo=\"2\">\n                        <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/02\/d9b57f7d-eacf-41d1-82ab-a88a05aa988b.jpeg\" \n                             alt=\"Bildungsinitiativen\" \n                             class=\"w-full h-full object-cover aspect-square\">\n                        <div class=\"absolute top-0 left-0 bg-barkwende\/80 text-white text-xs font-bold py-1 px-2 rounded-br z-10\">03<\/div>\n                        <div class=\"zoom-icon\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                            <\/svg>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"photo-thumbnail relative rounded-lg overflow-hidden shadow-md border-2 border-white group cursor-pointer gallery-thumbnail\" data-photo=\"3\">\n                        <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/02\/696437bb-a639-420b-98f3-e1d7d5d332c2.jpeg\" \n                             alt=\"Landwirtschaftliche Entwicklung\" \n                             class=\"w-full h-full object-cover aspect-square\">\n                        <div class=\"absolute top-0 left-0 bg-barkwende\/80 text-white text-xs font-bold py-1 px-2 rounded-br z-10\">04<\/div>\n                        <div class=\"zoom-icon\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                            <\/svg>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                \n                <!-- Bande panoramique (comme dans le Festival Barkwende) -->\n                <div class=\"photo-thumbnail relative rounded-xl overflow-hidden shadow-md border-2 border-white group cursor-pointer gallery-thumbnail h-32 mb-6\" data-photo=\"9\">\n                    <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/02\/c0932460-df1d-4d400-8d26-ab3ac8e84176.jpeg\" \n                         alt=\"Gemeinschaftsprojekt zur Dorfentwicklung\" \n                         class=\"w-full h-full object-cover\">\n                    <div class=\"absolute inset-0 bg-gradient-to-r from-barkwende\/60 to-transparent\"><\/div>\n                    <div class=\"absolute inset-0 flex items-center p-6 z-10\">\n                        <div>\n                            <h4 class=\"!text-white text-lg font-bold drop-shadow-md\">Dorfentwicklung<\/h4>\n                            <p class=\"text-white\/90 text-sm drop-shadow-md hidden md:block\">Gemeinschaftsprojekt zur nachhaltigen Entwicklung<\/p>\n                        <\/div>\n                    <\/div>\n                    <div class=\"zoom-icon\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                        <\/svg>\n                    <\/div>\n                <\/div>\n                \n                <!-- Deuxi\u00e8me rang\u00e9e de photos -->\n                <div class=\"grid grid-cols-2 md:grid-cols-4 gap-3 mb-6\">\n                    <div class=\"photo-thumbnail relative rounded-lg overflow-hidden shadow-md border-2 border-white group cursor-pointer gallery-thumbnail\" data-photo=\"4\">\n                        <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/02\/96778ece-c8c8-489f-910b-5bda41c29ee5.jpeg\" \n                             alt=\"Handwerkerausbildung\" \n                             class=\"w-full h-full object-cover aspect-square\">\n                        <div class=\"absolute top-0 left-0 bg-barkwende\/80 text-white text-xs font-bold py-1 px-2 rounded-br z-10\">05<\/div>\n                        <div class=\"zoom-icon\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                            <\/svg>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"photo-thumbnail relative rounded-lg overflow-hidden shadow-md border-2 border-white group cursor-pointer gallery-thumbnail\" data-photo=\"5\">\n                        <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/02\/c7d712fb-85ca-4816-88fe-2824ee57006f.jpeg\" \n                             alt=\"Gesundheitsversorgung\" \n                             class=\"w-full h-full object-cover aspect-square\">\n                        <div class=\"absolute top-0 left-0 bg-barkwende\/80 text-white text-xs font-bold py-1 px-2 rounded-br z-10\">06<\/div>\n                        <div class=\"zoom-icon\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                            <\/svg>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"photo-thumbnail relative rounded-lg overflow-hidden shadow-md border-2 border-white group cursor-pointer gallery-thumbnail\" data-photo=\"6\">\n                        <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/02\/a50da6e5-f3d2-4d01-bddf-9d3e8302ad93.jpeg\" \n                             alt=\"Umweltschutzma\u00dfnahmen\" \n                             class=\"w-full h-full object-cover aspect-square\">\n                        <div class=\"absolute top-0 left-0 bg-barkwende\/80 text-white text-xs font-bold py-1 px-2 rounded-br z-10\">07<\/div>\n                        <div class=\"zoom-icon\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                            <\/svg>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"photo-thumbnail relative rounded-lg overflow-hidden shadow-md border-2 border-white group cursor-pointer gallery-thumbnail\" data-photo=\"7\">\n                        <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/02\/76ce6d85-9e46-4df0-9063-f0676f468b3b.jpeg\" \n                             alt=\"Frauenf\u00f6rderungsprogramme\" \n                             class=\"w-full h-full object-cover aspect-square\">\n                        <div class=\"absolute top-0 left-0 bg-barkwende\/80 text-white text-xs font-bold py-1 px-2 rounded-br z-10\">08<\/div>\n                        <div class=\"zoom-icon\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                            <\/svg>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                \n                <!-- Miniatures en style polaroid (comme dans le Festival Barkwende) -->\n                <div class=\"flex flex-wrap gap-3 justify-center mt-8\">\n                    <h4 class=\"w-full text-center text-sm font-medium text-gray-500 mb-2\">Vergr\u00f6\u00dfern<\/h4>\n                    <div class=\"flex flex-wrap gap-3 justify-center\">\n                        <div class=\"w-16 h-16 md:w-20 md:h-20 bg-white p-1 rounded shadow -rotate-2 hover:rotate-1 transition-transform cursor-pointer gallery-thumbnail\" data-photo=\"0\">\n                            <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/02\/2413b941-78c5-4f2d-ba45-1dc829ed33cb.jpeg\" \n                                alt=\"\" class=\"w-full h-full object-cover rounded\">\n                        <\/div>\n                        <div class=\"w-16 h-16 md:w-20 md:h-20 bg-white p-1 rounded shadow rotate-1 hover:-rotate-1 transition-transform cursor-pointer gallery-thumbnail\" data-photo=\"1\">\n                            <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/02\/ff76e076-a524-4be6-a229-7e7bdd380f33.jpeg\" \n                                alt=\"\" class=\"w-full h-full object-cover rounded\">\n                        <\/div>\n                        \n                        <div class=\"w-16 h-16 md:w-20 md:h-20 bg-white p-1 rounded shadow rotate-2 hover:-rotate-1 transition-transform cursor-pointer gallery-thumbnail\" data-photo=\"2\">\n                            <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/02\/d9b57f7d-eacf-41d1-82ab-a88a05aa988b.jpeg\" \n                                alt=\"\" class=\"w-full h-full object-cover rounded\">\n                        <\/div>\n                        <div class=\"w-16 h-16 md:w-20 md:h-20 bg-white p-1 rounded shadow -rotate-1 hover:rotate-2 transition-transform cursor-pointer gallery-thumbnail\" data-photo=\"3\">\n                            <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/02\/696437bb-a639-420b-98f3-e1d7d5d332c2.jpeg\" \n                                alt=\"\" class=\"w-full h-full object-cover rounded\">\n                        <\/div>\n                        <div class=\"w-16 h-16 md:w-20 md:h-20 bg-white p-1 rounded shadow rotate-1 hover:-rotate-2 transition-transform cursor-pointer gallery-thumbnail\" data-photo=\"9\">\n                            <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/02\/c0932460-df1d-4d400-8d26-ab3ac8e84176.jpeg\" \n                                alt=\"\" class=\"w-full h-full object-cover rounded\">\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n        \n        <!-- Lightbox pour agrandir les photos (identique \u00e0 celui du Festival Barkwende) -->\n        <div id=\"lightbox-gallery\" class=\"lightbox\">\n            <div class=\"lightbox-content\">\n                <img decoding=\"async\" id=\"lightbox-img-gallery\" src=\"\" alt=\"Vollbild\" class=\"lightbox-img\">\n                <div class=\"absolute bottom-0 left-0 right-0 caption-overlay p-4\">\n                    <p id=\"lightbox-caption-gallery\" class=\"text-white text-center\"><\/p>\n                <\/div>\n                <button id=\"lightbox-close-gallery\" class=\"lightbox-close absolute top-4 right-4 text-white\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" \/>\n                    <\/svg>\n                <\/button>\n                <button id=\"lightbox-prev-gallery\" class=\"lightbox-prev absolute left-4 top-1\/2 transform -translate-y-1\/2 text-white\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\" \/>\n                    <\/svg>\n                <\/button>\n                <button id=\"lightbox-next-gallery\" class=\"lightbox-next absolute right-4 top-1\/2 transform -translate-y-1\/2 text-white\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\" \/>\n                    <\/svg>\n                <\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<!-- SECTION 1: Festival Barkwende 2019 -->\n<section id=\"event1\" class=\"container mx-auto px-4 py-16 max-w-7xl\">\n    <div class=\"bg-white rounded-2xl shadow-2xl overflow-hidden transform transition-all duration-700 hover:shadow-[0_25px_50px_-12px_rgba(0,0,0,0.2)] relative\">\n        <!-- D\u00e9coration de fond subtile -->\n        <div class=\"absolute inset-0 overflow-hidden opacity-5\">\n            <div class=\"absolute top-0 left-0 w-full h-full\">\n                <div class=\"absolute top-10 left-[10%] w-20 h-20 rounded-full bg-barkwende opacity-40\"><\/div>\n                <div class=\"absolute bottom-20 right-[20%] w-32 h-32 rounded-full bg-barkwende-light opacity-30\"><\/div>\n                <div class=\"absolute top-1\/3 right-[40%] w-16 h-16 rounded-full bg-barkwende-dark opacity-20\"><\/div>\n            <\/div>\n        <\/div>\n        \n        <!-- En-t\u00eate de l'\u00e9v\u00e9nement avec d\u00e9grad\u00e9 am\u00e9lior\u00e9 -->\n        <div class=\"relative h-56 md:h-56 bg-barkwende overflow-hidden\">\n            <!-- Motif de fond -->\n            <div class=\"absolute inset-0 opacity-20\">\n                <div class=\"absolute top-5 left-10 star-decoration animate-float\"><\/div>\n                <div class=\"absolute bottom-16 right-10 star-decoration animate-float\" style=\"animation-delay: 1s;\"><\/div>\n                <div class=\"absolute top-16 right-36 star-decoration animate-float\" style=\"animation-delay: 2s;\"><\/div>\n                <div class=\"absolute bottom-5 left-36 star-decoration animate-float\" style=\"animation-delay: 3s;\"><\/div>\n            <\/div>\n            \n            <!-- D\u00e9grad\u00e9 am\u00e9lior\u00e9 -->\n            <div class=\"absolute inset-0 bg-gradient-to-r from-barkwende-dark via-barkwende to-barkwende-light opacity-80\"><\/div>\n            \n            <!-- Contenu de l'en-t\u00eate -->\n            <div class=\"relative z-10 h-full flex items-center\">\n                <div class=\"px-8 py-4 max-w-3xl\">\n                    <h2 class=\"text-lg font-medium text-white\/90 mb-2 tracking-wider uppercase\">Kulturelles Event<\/h2>\n                    <h3 class=\"text-4xl md:text-5xl font-serif font-bold text-white mb-4 drop-shadow-lg\">Barkwende Festival<\/h3>\n                    <p class=\"text-white\/80 text-lg max-w-2xl font-light\">Eine lebendige Feier der Kultur und Traditionen von Burkina Faso<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n        \n        <!-- Informations sur l'\u00e9v\u00e9nement -->\n        <div class=\"px-6 py-8 md:px-10\">\n            <div class=\"flex flex-wrap items-center mb-8 text-sm md:text-base text-gray-700 border-b border-gray-100 pb-6\">\n                <div class=\"flex items-center mr-8 mb-3\">\n                    <div class=\"p-2 rounded-full bg-barkwende\/10 mr-3\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z\" \/>\n                        <\/svg>\n                    <\/div>\n                    <span class=\"font-medium\">13.-14. September 2019<\/span>\n                <\/div>\n                <div class=\"flex items-center mr-8 mb-3\">\n                    <div class=\"p-2 rounded-full bg-barkwende\/10 mr-3\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\" \/>\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\" \/>\n                        <\/svg>\n                    <\/div>\n                    <span class=\"font-medium\">Ouagadougou, Burkina Faso<\/span>\n                <\/div>\n            <\/div>\n            \n            <!-- Galerie de photos avec interaction -->\n            <div class=\"grid grid-cols-2 md:grid-cols-4 gap-3 mb-6\">\n                <h3 class=\"col-span-full text-xl font-serif font-bold text-gray-800 mb-1\">Festival-Momente<\/h3>\n                \n                <!-- Photos cliquables -->\n                <div class=\"photo-thumbnail relative rounded-lg overflow-hidden shadow-md border-2 border-white group cursor-pointer event1-thumbnail\" data-photo=\"1\">\n                    <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/23f5898a-a15c-4625-abb5-4323823a5d9b.jpeg\" \n                         alt=\"Barkwende Festival - Hauptfeier\" \n                         class=\"w-full h-full object-cover aspect-square\">\n                    <div class=\"absolute top-0 left-0 bg-barkwende\/80 text-white text-xs font-bold py-1 px-2 rounded-br z-10\">01<\/div>\n                    <div class=\"zoom-icon\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                        <\/svg>\n                    <\/div>\n                <\/div>\n\n                <div class=\"photo-thumbnail relative rounded-lg overflow-hidden shadow-md border-2 border-white group cursor-pointer event1-thumbnail\" data-photo=\"2\">\n                    <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/faad9d29-77a3-4189-95dc-4ad0033e28d2.jpeg\" \n                         alt=\"Barkwende Festival - Musiker\" \n                         class=\"w-full h-full object-cover aspect-square\">\n                    <div class=\"absolute top-0 left-0 bg-barkwende\/80 text-white text-xs font-bold py-1 px-2 rounded-br z-10\">02<\/div>\n                    <div class=\"zoom-icon\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                        <\/svg>\n                    <\/div>\n                <\/div>\n                \n                <div class=\"photo-thumbnail relative rounded-lg overflow-hidden shadow-md border-2 border-white group cursor-pointer event1-thumbnail\" data-photo=\"3\">\n                    <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/89bc89b6-2ab2-4ce9-b5d2-a29d95bc3fbb.jpeg\" \n                         alt=\"Barkwende Festival - Traditionelle Kost\u00fcme\" \n                         class=\"w-full h-full object-cover aspect-square\">\n                    <div class=\"absolute top-0 left-0 bg-barkwende\/80 text-white text-xs font-bold py-1 px-2 rounded-br z-10\">03<\/div>\n                    <div class=\"zoom-icon\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                        <\/svg>\n                    <\/div>\n                <\/div>\n                \n                <div class=\"photo-thumbnail relative rounded-lg overflow-hidden shadow-md border-2 border-white group cursor-pointer event1-thumbnail\" data-photo=\"4\">\n                    <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/980f0093-bed1-4cbc-9be1-a8b252a2e641.jpeg\" \n                         alt=\"Barkwende Festival - Gesamtansicht\" \n                         class=\"w-full h-full object-cover aspect-square\">\n                    <div class=\"absolute top-0 left-0 bg-barkwende\/80 text-white text-xs font-bold py-1 px-2 rounded-br z-10\">04<\/div>\n                    <div class=\"zoom-icon\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                        <\/svg>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <!-- Bande panoramique -->\n            <div class=\"photo-thumbnail relative rounded-xl overflow-hidden shadow-md border-2 border-white group cursor-pointer event1-thumbnail h-32 mb-6\" data-photo=\"5\">\n                <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/9b566a83-46ec-486b-b472-a535e6bf3b70.jpeg\" \n                     alt=\"Barkwende Festival - Publikum Panorama\" \n                     class=\"w-full h-full object-cover\">\n                <div class=\"absolute inset-0 bg-gradient-to-r from-barkwende\/60 to-transparent\"><\/div>\n                <div class=\"absolute inset-0 flex items-center p-6 z-10\">\n                    <div>\n                        <h4 class=\"text-white text-lg font-bold drop-shadow-md\">Panoramablick<\/h4>\n                        <p class=\"text-white\/90 text-sm drop-shadow-md hidden md:block\">Publikum des Barkwende Festivals<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"zoom-icon\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                    <\/svg>\n                <\/div>\n            <\/div>\n            \n            <!-- Miniatures en style polaroid -->\n            <div class=\"flex flex-wrap gap-3 justify-center mt-8\">\n                <h4 class=\"w-full text-center text-sm font-medium text-gray-500 mb-2\">Vergr\u00f6\u00dfern<\/h4>\n                <div class=\"flex flex-wrap gap-3 justify-center\">\n                    <div class=\"w-16 h-16 md:w-20 md:h-20 bg-white p-1 rounded shadow -rotate-2 hover:rotate-1 transition-transform cursor-pointer event1-thumbnail\" data-photo=\"2\">\n                        <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/faad9d29-77a3-4189-95dc-4ad0033e28d2.jpeg\" \n                            alt=\"\" class=\"w-full h-full object-cover rounded\">\n                    <\/div>\n                    <div class=\"w-16 h-16 md:w-20 md:h-20 bg-white p-1 rounded shadow rotate-1 hover:-rotate-1 transition-transform cursor-pointer event1-thumbnail\" data-photo=\"1\">\n                        <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/23f5898a-a15c-4625-abb5-4323823a5d9b.jpeg\" \n                            alt=\"\" class=\"w-full h-full object-cover rounded\">\n                    <\/div>\n                    \n                    <div class=\"w-16 h-16 md:w-20 md:h-20 bg-white p-1 rounded shadow rotate-2 hover:-rotate-1 transition-transform cursor-pointer event1-thumbnail\" data-photo=\"3\">\n                        <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/89bc89b6-2ab2-4ce9-b5d2-a29d95bc3fbb.jpeg\" \n                            alt=\"\" class=\"w-full h-full object-cover rounded\">\n                    <\/div>\n                    <div class=\"w-16 h-16 md:w-20 md:h-20 bg-white p-1 rounded shadow -rotate-1 hover:rotate-2 transition-transform cursor-pointer event1-thumbnail\" data-photo=\"4\">\n                        <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/980f0093-bed1-4cbc-9be1-a8b252a2e641.jpeg\" \n                            alt=\"\" class=\"w-full h-full object-cover rounded\">\n                    <\/div>\n                    <div class=\"w-16 h-16 md:w-20 md:h-20 bg-white p-1 rounded shadow rotate-1 hover:-rotate-2 transition-transform cursor-pointer event1-thumbnail\" data-photo=\"5\">\n                        <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/9b566a83-46ec-486b-b472-a535e6bf3b70.jpeg\" \n                            alt=\"\" class=\"w-full h-full object-cover rounded\">\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n    \n    <!-- Lightbox pour agrandir les photos -->\n    <div id=\"lightbox-event1\" class=\"lightbox\">\n        <div class=\"lightbox-content\">\n            <img decoding=\"async\" id=\"lightbox-img-event1\" src=\"\" alt=\"Vollbild\" class=\"lightbox-img\">\n            <div class=\"absolute bottom-0 left-0 right-0 caption-overlay p-4\">\n                <p id=\"lightbox-caption-event1\" class=\"text-white text-center\"><\/p>\n            <\/div>\n            <button id=\"lightbox-close-event1\" class=\"lightbox-close absolute top-4 right-4 text-white\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" \/>\n                <\/svg>\n            <\/button>\n            <button id=\"lightbox-prev-event1\" class=\"lightbox-prev absolute left-4 top-1\/2 transform -translate-y-1\/2 text-white\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\" \/>\n                <\/svg>\n            <\/button>\n            <button id=\"lightbox-next-event1\" class=\"lightbox-next absolute right-4 top-1\/2 transform -translate-y-1\/2 text-white\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\" \/>\n                <\/svg>\n            <\/button>\n        <\/div>\n    <\/div>\n<\/section>\n\n\n<!-- SECTION 3: \u00c9v\u00e9nement 2 (Festival Barkwende 2025) -->\n<section id=\"event2\" class=\"bg-gray-100 font-sans text-gray-800\">\n    <div class=\"container mx-auto px-4 py-16 max-w-7xl\">\n        <div class=\"bg-white rounded-2xl shadow-2xl overflow-hidden transform transition-all duration-700 hover:shadow-[0_25px_50px_-12px_rgba(0,0,0,0.2)] relative\">\n            <!-- D\u00e9coration de fond subtile -->\n            <div class=\"absolute inset-0 overflow-hidden opacity-5\">\n                <div class=\"absolute top-0 left-0 w-full h-full\">\n                    <div class=\"absolute top-10 left-[10%] w-20 h-20 rounded-full bg-barkwende opacity-40\"><\/div>\n                    <div class=\"absolute bottom-20 right-[20%] w-32 h-32 rounded-full bg-barkwende-light opacity-30\"><\/div>\n                    <div class=\"absolute top-1\/3 right-[40%] w-16 h-16 rounded-full bg-barkwende-dark opacity-20\"><\/div>\n                <\/div>\n            <\/div>\n            \n            <!-- En-t\u00eate de l'\u00e9v\u00e9nement avec d\u00e9grad\u00e9 am\u00e9lior\u00e9 -->\n            <div class=\"relative h-56 md:h-56 bg-barkwende overflow-hidden\">\n                <!-- Motif de fond -->\n                <div class=\"absolute inset-0 opacity-20\">\n                    <div class=\"absolute top-5 left-10 star-decoration animate-float\"><\/div>\n                    <div class=\"absolute bottom-16 right-10 star-decoration animate-float\" style=\"animation-delay: 1s;\"><\/div>\n                    <div class=\"absolute top-16 right-36 star-decoration animate-float\" style=\"animation-delay: 2s;\"><\/div>\n                    <div class=\"absolute bottom-5 left-36 star-decoration animate-float\" style=\"animation-delay: 3s;\"><\/div>\n                <\/div>\n                \n                <!-- D\u00e9grad\u00e9 am\u00e9lior\u00e9 -->\n                <div class=\"absolute inset-0 bg-gradient-to-r from-barkwende-dark via-barkwende to-barkwende-light opacity-80\"><\/div>\n                \n                <!-- Contenu de l'en-t\u00eate -->\n                <div class=\"relative z-10 h-full flex items-center\">\n                    <div class=\"px-8 py-4 max-w-3xl\">\n                        <h2 class=\"text-lg font-medium text-white\/90 mb-2 tracking-wider uppercase\">N\u00e4chstes Event<\/h2>\n                        <h3 class=\"text-4xl md:text-5xl font-serif font-bold text-white mb-4 drop-shadow-lg\">Barkwende Festival<\/h3>\n                        <p class=\"text-white\/80 text-lg max-w-2xl font-light\">Bobo-Dioulasso, Ausgabe 2025<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <!-- Informations sur l'\u00e9v\u00e9nement -->\n            <div class=\"px-6 py-8 md:px-10\">\n                <div class=\"flex flex-wrap items-center mb-8 text-sm md:text-base text-gray-700 border-b border-gray-100 pb-6\">\n                    <div class=\"flex items-center mr-8 mb-3\">\n                        <div class=\"p-2 rounded-full bg-barkwende\/10 mr-3\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z\" \/>\n                            <\/svg>\n                        <\/div>\n                        <span class=\"font-medium\">15. Februar 2025<\/span>\n                    <\/div>\n                    <div class=\"flex items-center mr-8 mb-3\">\n                        <div class=\"p-2 rounded-full bg-barkwende\/10 mr-3\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\" \/>\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\" \/>\n                            <\/svg>\n                        <\/div>\n                        <span class=\"font-medium\">Bobo-Dioulasso, Burkina Faso<\/span>\n                    <\/div>\n                <\/div>\n                \n                <!-- Galerie de photos avec interaction -->\n                <div class=\"grid grid-cols-2 md:grid-cols-4 gap-3 mb-6\">\n                    <h3 class=\"col-span-full text-xl font-serif font-bold text-gray-800 mb-1\">Event-Fotos<\/h3>\n                    \n                    <!-- Photos cliquables -->\n                    <div class=\"photo-thumbnail relative rounded-lg overflow-hidden shadow-md border-2 border-white group cursor-pointer event2-thumbnail\" data-photo=\"0\">\n                        <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/5d1b97e7-af3f-45c8-873f-80f308a78f6e.jpeg\" \n                             alt=\"Barkwende Festival - Hauptansicht\" \n                             class=\"w-full h-full object-cover aspect-square\">\n                        <div class=\"absolute top-0 left-0 bg-barkwende\/80 text-white text-xs font-bold py-1 px-2 rounded-br z-10\">01<\/div>\n                        <div class=\"zoom-icon\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                            <\/svg>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"photo-thumbnail relative rounded-lg overflow-hidden shadow-md border-2 border-white group cursor-pointer event2-thumbnail\" data-photo=\"1\">\n                        <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/64afae0a-0191-4737-a416-81f2220a2b84.jpeg\" \n                             alt=\"Barkwende Festival - K\u00fcnstler\" \n                             class=\"w-full h-full object-cover aspect-square\">\n                        <div class=\"absolute top-0 left-0 bg-barkwende\/80 text-white text-xs font-bold py-1 px-2 rounded-br z-10\">02<\/div>\n                        <div class=\"zoom-icon\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                            <\/svg>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"photo-thumbnail relative rounded-lg overflow-hidden shadow-md border-2 border-white group cursor-pointer event2-thumbnail\" data-photo=\"3\">\n                        <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/e884598a-2be7-4911-a8c0-b6cee9b08491.jpeg\" \n                             alt=\"Barkwende Festival - B\u00fchne\" \n                             class=\"w-full h-full object-cover aspect-square\">\n                        <div class=\"absolute top-0 left-0 bg-barkwende\/80 text-white text-xs font-bold py-1 px-2 rounded-br z-10\">03<\/div>\n                        <div class=\"zoom-icon\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                            <\/svg>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"photo-thumbnail relative rounded-lg overflow-hidden shadow-md border-2 border-white group cursor-pointer event2-thumbnail\" data-photo=\"4\">\n                        <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/b8cd41d4-f044-4ba4-82bb-1a4ecf88b65c.jpeg\" \n                             alt=\"Barkwende Festival - Tanz\" \n                             class=\"w-full h-full object-cover aspect-square\">\n                        <div class=\"absolute top-0 left-0 bg-barkwende\/80 text-white text-xs font-bold py-1 px-2 rounded-br z-10\">04<\/div>\n                        <div class=\"zoom-icon\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                            <\/svg>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                \n                <!-- Deuxi\u00e8me rang\u00e9e de photos -->\n                <div class=\"grid grid-cols-2 md:grid-cols-4 gap-3 mb-6\">\n                    <div class=\"photo-thumbnail relative rounded-lg overflow-hidden shadow-md border-2 border-white group cursor-pointer event2-thumbnail\" data-photo=\"3\">\n                        <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/e884598a-2be7-4911-a8c0-b6cee9b08491.jpeg\" \n                             alt=\"Barkwende Festival - B\u00fchne\" \n                             class=\"w-full h-full object-cover aspect-square\">\n                        <div class=\"absolute top-0 left-0 bg-barkwende\/80 text-white text-xs font-bold py-1 px-2 rounded-br z-10\">04<\/div>\n                        <div class=\"zoom-icon\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                            <\/svg>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"photo-thumbnail relative rounded-lg overflow-hidden shadow-md border-2 border-white group cursor-pointer event2-thumbnail\" data-photo=\"4\">\n                        <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/b8cd41d4-f044-4ba4-82bb-1a4ecf88b65c.jpeg\" \n                             alt=\"Barkwende Festival - Tanz\" \n                             class=\"w-full h-full object-cover aspect-square\">\n                        <div class=\"absolute top-0 left-0 bg-barkwende\/80 text-white text-xs font-bold py-1 px-2 rounded-br z-10\">05<\/div>\n                        <div class=\"zoom-icon\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                            <\/svg>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                \n                <!-- Bande panoramique comme dans les autres sections -->\n                <div class=\"photo-thumbnail relative rounded-xl overflow-hidden shadow-md border-2 border-white group cursor-pointer event2-thumbnail h-32 mb-6\" data-photo=\"2\">\n                    <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/129923f7-f4d4-4988-96b9-098684c240be.jpeg\" \n                         alt=\"Barkwende Festival - Panoramablick der Teilnehmer\" \n                         class=\"w-full h-full object-cover\">\n                    <div class=\"absolute inset-0 bg-gradient-to-r from-barkwende\/60 to-transparent\"><\/div>\n                    <div class=\"absolute inset-0 flex items-center p-6 z-10\">\n                        <div>\n                            <h4 class=\"text-white text-lg font-bold drop-shadow-md\">\u00dcberblick<\/h4>\n                            <p class=\"text-white\/90 text-sm drop-shadow-md hidden md:block\">Teilnehmer und Besucher des Barkwende Festivals 2025<\/p>\n                        <\/div>\n                    <\/div>\n                    <div class=\"zoom-icon\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                        <\/svg>\n                    <\/div>\n                <\/div>\n                \n                <!-- Miniatures en style polaroid -->\n                <div class=\"flex flex-wrap gap-3 justify-center mt-8\">\n                    <h4 class=\"w-full text-center text-sm font-medium text-gray-500 mb-2\">Vergr\u00f6\u00dfern<\/h4>\n                    <div class=\"flex flex-wrap gap-3 justify-center\">\n                        <div class=\"w-16 h-16 md:w-20 md:h-20 bg-white p-1 rounded shadow -rotate-2 hover:rotate-1 transition-transform cursor-pointer event2-thumbnail\" data-photo=\"0\">\n                            <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/5d1b97e7-af3f-45c8-873f-80f308a78f6e.jpeg\" \n                                alt=\"\" class=\"w-full h-full object-cover rounded\">\n                        <\/div>\n                        <div class=\"w-16 h-16 md:w-20 md:h-20 bg-white p-1 rounded shadow rotate-1 hover:-rotate-1 transition-transform cursor-pointer event2-thumbnail\" data-photo=\"1\">\n                            <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/64afae0a-0191-4737-a416-81f2220a2b84.jpeg\" \n                                alt=\"\" class=\"w-full h-full object-cover rounded\">\n                        <\/div>\n                        \n                        <div class=\"w-16 h-16 md:w-20 md:h-20 bg-white p-1 rounded shadow rotate-2 hover:-rotate-1 transition-transform cursor-pointer event2-thumbnail\" data-photo=\"2\">\n                            <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/129923f7-f4d4-4988-96b9-098684c240be.jpeg\" \n                                alt=\"\" class=\"w-full h-full object-cover rounded\">\n                        <\/div>\n                        <div class=\"w-16 h-16 md:w-20 md:h-20 bg-white p-1 rounded shadow -rotate-1 hover:rotate-2 transition-transform cursor-pointer event2-thumbnail\" data-photo=\"3\">\n                            <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/e884598a-2be7-4911-a8c0-b6cee9b08491.jpeg\" \n                                alt=\"\" class=\"w-full h-full object-cover rounded\">\n                        <\/div>\n                        <div class=\"w-16 h-16 md:w-20 md:h-20 bg-white p-1 rounded shadow rotate-1 hover:-rotate-2 transition-transform cursor-pointer event2-thumbnail\" data-photo=\"4\">\n                            <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/b8cd41d4-f044-4ba4-82bb-1a4ecf88b65c.jpeg\" \n                                alt=\"\" class=\"w-full h-full object-cover rounded\">\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n        \n        <!-- Lightbox pour agrandir les photos -->\n        <div id=\"lightbox-event2\" class=\"lightbox\">\n            <div class=\"lightbox-content\">\n                <img decoding=\"async\" id=\"lightbox-img-event2\" src=\"\" alt=\"Vollbild\" class=\"lightbox-img\">\n                <div class=\"absolute bottom-0 left-0 right-0 caption-overlay p-4\">\n                    <p id=\"lightbox-caption-event2\" class=\"text-white text-center\"><\/p>\n                <\/div>\n                <button id=\"lightbox-close-event2\" class=\"lightbox-close absolute top-4 right-4 text-white\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" \/>\n                    <\/svg>\n                <\/button>\n                <button id=\"lightbox-prev-event2\" class=\"lightbox-prev absolute left-4 top-1\/2 transform -translate-y-1\/2 text-white\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\" \/>\n                    <\/svg>\n                <\/button>\n                <button id=\"lightbox-next-event2\" class=\"lightbox-next absolute right-4 top-1\/2 transform -translate-y-1\/2 text-white\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\" \/>\n                    <\/svg>\n                <\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    \/\/ Donn\u00e9es des photos de l'\u00e9v\u00e9nement 1 (Festival 2019)\n    const event1Photos = [\n        {\n            src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/23f5898a-a15c-4625-abb5-4323823a5d9b.jpeg\",\n            caption: \"Hauptfeier - Traditionelle T\u00e4nzer bei der Er\u00f6ffnungszeremonie\"\n        },\n        {\n            src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/faad9d29-77a3-4189-95dc-4ad0033e28d2.jpeg\",\n            caption: \"Traditionelle Musiker beim Barkwende Festival\"\n        },\n        {\n            src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/89bc89b6-2ab2-4ce9-b5d2-a29d95bc3fbb.jpeg\",\n            caption: \"Traditionelle Kost\u00fcme aus Burkina Faso\"\n        },\n        {\n            src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/980f0093-bed1-4cbc-9be1-a8b252a2e641.jpeg\",\n            caption: \"Gesamtansicht der Festivalb\u00fchne\"\n        },\n        {\n            src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/9b566a83-46ec-486b-b472-a535e6bf3b70.jpeg\",\n            caption: \"Panorama des Publikums beim Barkwende Festival\"\n        }\n    ];\n    \n    \/\/ Donn\u00e9es des photos de la galerie (Mediathek)\n    const galleryPhotos = [\n        {\n            src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/02\/2413b941-78c5-4f2d-ba45-1dc829ed33cb.jpeg\",\n            caption: \"Projekt Highlight - Eine Gemeinschaftsinitiative in Burkina Faso\"\n        },\n        {\n            src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/02\/ff76e076-a524-4be6-a229-7e7bdd380f33.jpeg\",\n            caption: \"Wasserversorgungsprojekt in einem l\u00e4ndlichen Dorf\"\n        },\n        {\n            src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/02\/d9b57f7d-eacf-41d1-82ab-a88a05aa988b.jpeg\",\n            caption: \"Bildungsinitiativen f\u00fcr Kinder\"\n        },\n        {\n            src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/02\/696437bb-a639-420b-98f3-e1d7d5d332c2.jpeg\",\n            caption: \"Landwirtschaftliche Entwicklung und Schulungen\"\n        },\n        {\n            src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/02\/96778ece-c8c8-489f-910b-5bda41c29ee5.jpeg\",\n            caption: \"Handwerkerausbildung und lokales Handwerk\"\n        },\n        {\n            src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/02\/c7d712fb-85ca-4816-88fe-2824ee57006f.jpeg\",\n            caption: \"Gesundheitsversorgung und medizinische Unterst\u00fctzung\"\n        },\n        {\n            src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/02\/a50da6e5-f3d2-4d01-bddf-9d3e8302ad93.jpeg\",\n            caption: \"Umweltschutzma\u00dfnahmen und nachhaltige Praktiken\"\n        },\n        {\n            src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/02\/76ce6d85-9e46-4df0-9063-f0676f468b3b.jpeg\",\n            caption: \"Frauenf\u00f6rderungsprogramme und Gleichberechtigung\"\n        },\n        {\n            src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/02\/144a1181-142c-4839-b626-82b73a94cb51.jpeg\",\n            caption: \"Kultureller Austausch und lokale Traditionen\"\n        },\n        {\n            src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/02\/c0932460-df1d-4d400-8d26-ab3ac8e84176.jpeg\",\n            caption: \"Gemeinschaftsprojekt zur Dorfentwicklung\"\n        }\n    ];\n    \n    \/\/ Donn\u00e9es des photos de l'\u00e9v\u00e9nement 2 (Festival 2025)\n    const event2Photos = [\n        {\n            src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/5d1b97e7-af3f-45c8-873f-80f308a78f6e.jpeg\",\n            caption: \"Hauptansicht des Barkwende Festivals in Bobo-Dioulasso\"\n        },\n        {\n            src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/64afae0a-0191-4737-a416-81f2220a2b84.jpeg\",\n            caption: \"K\u00fcnstler und Performer beim kulturellen Event\"\n        },\n        {\n            src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/129923f7-f4d4-4988-96b9-098684c240be.jpeg\",\n            caption: \"Teilnehmer und Besucher entdecken die burkinische Kultur\"\n        },\n        {\n            src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/e884598a-2be7-4911-a8c0-b6cee9b08491.jpeg\",\n            caption: \"Hauptb\u00fchne mit kulturellen Pr\u00e4sentationen\"\n        },\n        {\n            src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/b8cd41d4-f044-4ba4-82bb-1a4ecf88b65c.jpeg\",\n            caption: \"Traditionelle T\u00e4nze und kulturelle Darbietungen\"\n        }\n    ];\n    \n    \/\/ Fonction g\u00e9n\u00e9rique pour configurer un lightbox\n    function setupLightbox(id, photos, thumbnailClass) {\n        const lightbox = document.getElementById(`lightbox-${id}`);\n        const lightboxImg = document.getElementById(`lightbox-img-${id}`);\n        const lightboxCaption = document.getElementById(`lightbox-caption-${id}`);\n        const lightboxClose = document.getElementById(`lightbox-close-${id}`);\n        const lightboxPrev = document.getElementById(`lightbox-prev-${id}`);\n        const lightboxNext = document.getElementById(`lightbox-next-${id}`);\n        const photoThumbnails = document.querySelectorAll(`.${thumbnailClass}`);\n        \n        let currentPhotoIndex = 0;\n        \n        \/\/ Ouvrir le lightbox\n        function openLightbox(index) {\n            currentPhotoIndex = index;\n            updateLightboxContent();\n            lightbox.classList.add('active');\n            document.body.style.overflow = 'hidden'; \/\/ Emp\u00eacher le d\u00e9filement\n        }\n        \n        \/\/ Fermer le lightbox\n        function closeLightbox() {\n            lightbox.classList.remove('active');\n            document.body.style.overflow = ''; \/\/ Restaurer le d\u00e9filement\n        }\n        \n        \/\/ Mettre \u00e0 jour le contenu du lightbox\n        function updateLightboxContent() {\n            const photo = photos[currentPhotoIndex];\n            lightboxImg.src = photo.src;\n            lightboxCaption.textContent = photo.caption;\n        }\n        \n        \/\/ Photo pr\u00e9c\u00e9dente\n        function showPrevPhoto() {\n            currentPhotoIndex = (currentPhotoIndex - 1 + photos.length) % photos.length;\n            updateLightboxContent();\n        }\n        \n        \/\/ Photo suivante\n        function showNextPhoto() {\n            currentPhotoIndex = (currentPhotoIndex + 1) % photos.length;\n            updateLightboxContent();\n        }\n        \n        \/\/ \u00c9v\u00e9nements pour les miniatures\n        photoThumbnails.forEach(thumbnail => {\n            thumbnail.addEventListener('click', function(e) {\n                e.preventDefault(); \/\/ Emp\u00eacher le comportement de lien par d\u00e9faut\n                const photoIndex = parseInt(this.getAttribute('data-photo'));\n                openLightbox(photoIndex);\n            });\n        });\n        \n        \/\/ \u00c9v\u00e9nements pour le lightbox\n        lightboxClose.addEventListener('click', closeLightbox);\n        lightboxPrev.addEventListener('click', showPrevPhoto);\n        lightboxNext.addEventListener('click', showNextPhoto);\n        \n        \/\/ Fermer le lightbox en cliquant en dehors de l'image\n        lightbox.addEventListener('click', function(e) {\n            if (e.target === lightbox) {\n                closeLightbox();\n            }\n        });\n        \n        \/\/ Navigation au clavier (uniquement si ce lightbox est actif)\n        document.addEventListener('keydown', function(e) {\n            if (!lightbox.classList.contains('active')) return;\n            \n            if (e.key === 'Escape') {\n                closeLightbox();\n            } else if (e.key === 'ArrowLeft') {\n                showPrevPhoto();\n            } else if (e.key === 'ArrowRight') {\n                showNextPhoto();\n            }\n        });\n    }\n    \n    \/\/ Configurer les trois lightboxes s\u00e9par\u00e9s\n    setupLightbox('event1', event1Photos, 'event1-thumbnail');\n    setupLightbox('gallery', galleryPhotos, 'gallery-thumbnail');\n    setupLightbox('event2', event2Photos, 'event2-thumbnail');\n});\n<\/script>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-255f1ec e-con-full e-flex e-con e-parent\" data-id=\"255f1ec\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b9b276f elementor-widget elementor-widget-html\" data-id=\"b9b276f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n    \n    <style>\n        \/* Styles globaux pour toutes les sections *\/\n        .star-decoration {\n            position: absolute;\n            width: 12px;\n            height: 12px;\n            background: white;\n            border-radius: 50%;\n            box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.8);\n            opacity: 0.6;\n        }\n        \n        .star-decoration::before,\n        .star-decoration::after {\n            content: '';\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            background: white;\n            box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.8);\n        }\n        \n        .star-decoration::before {\n            width: 24px;\n            height: 2px;\n            margin-left: -12px;\n            margin-top: -1px;\n        }\n        \n        .star-decoration::after {\n            width: 2px;\n            height: 24px;\n            margin-left: -1px;\n            margin-top: -12px;\n        }\n        \n        \/* Styles pour les miniatures - dimensions fixes *\/\n        .photo-thumbnail {\n            transition: all 0.3s ease !important;\n            position: relative !important;\n            overflow: hidden !important;\n            box-sizing: border-box !important;\n            border: 2px solid white !important;\n            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;\n            border-radius: 0.5rem !important;\n            cursor: pointer !important;\n        }\n        \n        \/* Force l'aspect-ratio sur les miniatures *\/\n        .photo-thumbnail img {\n            width: 100% !important;\n            height: 100% !important;\n            object-fit: cover !important;\n            display: block !important;\n        }\n        \n        \/* Miniatures dans la grille principale *\/\n        .grid .photo-thumbnail {\n            width: 100% !important;\n            height: auto !important;\n        }\n        \n        \/* Miniatures dans la grille avec aspect carr\u00e9 *\/\n        .grid .photo-thumbnail .aspect-square {\n            aspect-ratio: 1\/1 !important;\n        }\n        \n        \/* Force la hauteur des miniatures panoramiques *\/\n        .photo-thumbnail.h-32 {\n            height: 8rem !important;\n        }\n        \n        \/* Miniatures polaroid en bas *\/\n        .w-16.h-16 {\n            width: 4rem !important;\n            height: 4rem !important;\n            min-width: 4rem !important;\n            min-height: 4rem !important;\n            max-width: 4rem !important;\n            max-height: 4rem !important;\n        }\n        \n        @media (min-width: 768px) {\n            .md\\:w-20.md\\:h-20 {\n                width: 5rem !important;\n                height: 5rem !important;\n                min-width: 5rem !important;\n                min-height: 5rem !important;\n                max-width: 5rem !important;\n                max-height: 5rem !important;\n            }\n        }\n        \n        .photo-thumbnail:hover {\n            transform: scale(1.03) !important;\n            z-index: 10 !important;\n        }\n        \n        \/* Hauteur fixe pour certaines miniatures *\/\n        .h-64 {\n            height: 16rem !important;\n            min-height: 16rem !important;\n        }\n        \n        .lightbox {\n            display: none;\n            position: fixed;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background-color: rgba(0, 0, 0, 0.9);\n            z-index: 1000;\n            justify-content: center;\n            align-items: center;\n            opacity: 0;\n            transition: opacity 0.3s ease;\n        }\n        \n        .lightbox.active {\n            display: flex;\n            opacity: 1;\n        }\n        \n        .lightbox-content {\n            position: relative;\n            max-width: 95%;\n            max-height: 95%;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n        }\n        \n                .lightbox-img {\n            width: 95vw !important; \/* Force une largeur tr\u00e8s grande *\/\n            height: auto !important;\n            max-height: 95vh;\n            object-fit: contain;\n            border: 4px solid white;\n            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);\n            transition: transform 0.3s ease;\n            cursor: zoom-in;\n        }\n        \n        .lightbox-img.portrait-mode {\n            width: auto !important;\n            height: 95vh !important;\n        }\n        \n        .lightbox-img.full-size {\n            max-width: none;\n            max-height: none;\n            width: auto !important;\n            height: auto !important;\n            transform: scale(3); \/* Zoom tr\u00e8s important *\/\n            cursor: zoom-out;\n        }\n        \n        .lightbox-content {\n            position: relative;\n            max-width: 98%;\n            max-height: 98%;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n        }\n        \n        .lightbox-content.full-size-mode {\n            overflow: auto;\n            max-width: 100%;\n            max-height: 100%;\n            width: 100%;\n            height: 100%;\n            padding: 20px;\n        }\n        \n        .lightbox-close, .lightbox-prev, .lightbox-next {\n            background: rgba(255, 255, 255, 0.2);\n            border-radius: 50%;\n            width: 40px;\n            height: 40px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            cursor: pointer;\n            transition: background 0.3s ease;\n        }\n        \n        .lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover {\n            background: rgba(255, 255, 255, 0.4);\n        }\n        \n        .zoom-icon {\n            position: absolute;\n            bottom: 10px;\n            right: 10px;\n            background: rgba(255, 255, 255, 0.7);\n            border-radius: 50%;\n            width: 30px;\n            height: 30px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            opacity: 0;\n            transition: opacity 0.3s ease;\n        }\n        \n        .photo-thumbnail:hover .zoom-icon {\n            opacity: 1;\n        }\n        \n        @keyframes float {\n            0%, 100% {\n                transform: translateY(0) rotate(0);\n            }\n            50% {\n                transform: translateY(-8px) rotate(3deg);\n            }\n        }\n        \n        .animate-float {\n            animation: float 6s ease-in-out infinite;\n        }\n        \n        .caption-overlay {\n            background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);\n        }\n    <\/style>\n\n<div class=\"bg-gray-100 font-sans text-gray-800\">\n    \n<!-- SECTION: Galerie Mediathek -->\n<section class=\"py-20 bg-gray-50\">\n    <!-- En-t\u00eate de section avec animation l\u00e9g\u00e8re -->\n    <div class=\"container mx-auto px-4 mb-12\">\n        <div class=\"text-center max-w-3xl mx-auto\">\n            <span class=\"text-red-900 font-semibold tracking-wider uppercase relative inline-block before:content-[''] before:absolute before:h-0.5 before:w-12 before:bg-red-900 before:-left-16 before:top-1\/2 after:content-[''] after:absolute after:h-0.5 after:w-12 after:bg-red-900 after:-right-16 after:top-1\/2\">Galerie<\/span>\n            <h2 class=\"text-4xl font-bold text-gray-900 mt-3 mb-6\">Unsere Fotosammlung<\/h2>\n            <p class=\"text-xl text-gray-600\">Eine vollst\u00e4ndige visuelle Erkundung durch unsere Linse<\/p>\n        <\/div>\n    <\/div>\n\n    <!-- Contenu principal -->\n    <div id=\"gallery\" class=\"container mx-auto px-4 py-8 max-w-7xl\">\n        <div class=\"bg-white rounded-2xl shadow-2xl overflow-hidden transform transition-all duration-700 hover:shadow-[0_25px_50px_-12px_rgba(0,0,0,0.2)] relative\">\n            <!-- D\u00e9coration de fond subtile -->\n            <div class=\"absolute inset-0 overflow-hidden opacity-5\">\n                <div class=\"absolute top-0 left-0 w-full h-full\">\n                    <div class=\"absolute top-10 left-[10%] w-20 h-20 rounded-full bg-barkwende opacity-40\"><\/div>\n                    <div class=\"absolute bottom-20 right-[20%] w-32 h-32 rounded-full bg-barkwende-light opacity-30\"><\/div>\n                    <div class=\"absolute top-1\/3 right-[40%] w-16 h-16 rounded-full bg-barkwende-dark opacity-20\"><\/div>\n                <\/div>\n            <\/div>\n\n            <!-- En-t\u00eate de la galerie avec d\u00e9grad\u00e9 am\u00e9lior\u00e9 -->\n            <div class=\"relative h-40 md:h-48 bg-barkwende overflow-hidden\">\n                <!-- Motif de fond -->\n                <div class=\"absolute inset-0 opacity-20\">\n                    <div class=\"absolute top-5 left-10 star-decoration animate-float\"><\/div>\n                    <div class=\"absolute bottom-16 right-10 star-decoration animate-float\" style=\"animation-delay: 1s;\"><\/div>\n                    <div class=\"absolute top-16 right-36 star-decoration animate-float\" style=\"animation-delay: 2s;\"><\/div>\n                    <div class=\"absolute bottom-5 left-36 star-decoration animate-float\" style=\"animation-delay: 3s;\"><\/div>\n                <\/div>\n                \n                <!-- D\u00e9grad\u00e9 am\u00e9lior\u00e9 -->\n                <div class=\"absolute inset-0 bg-gradient-to-r from-barkwende-dark via-barkwende to-barkwende-light opacity-80\"><\/div>\n                \n                <!-- Contenu de l'en-t\u00eate -->\n                <div class=\"relative z-10 h-full flex items-center\">\n                    <div class=\"px-8 py-4 max-w-3xl\">\n                        <h2 class=\"text-lg font-medium !text-white\/90 mb-2 tracking-wider uppercase\">Fotodokumentation<\/h2>\n                        <h3 class=\"text-4xl md:text-5xl font-serif font-bold !text-white mb-4 drop-shadow-lg\">Unsere Mediathek<\/h3>\n                        <p class=\"text-white\/80 text-lg max-w-2xl font-light\">Vollst\u00e4ndige Sammlung unseres Fotoprojekts<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"px-6 py-8 md:px-10\">\n                <!-- Premi\u00e8re grille de photos - Portraits principaux -->\n                <div class=\"grid grid-cols-2 md:grid-cols-4 gap-3 mb-6\">\n                    <h3 class=\"col-span-full text-xl font-serif font-bold text-gray-800 mb-1\">Portr\u00e4ts<\/h3>\n                    \n                    <!-- Photos cliquables avec style du Festival Barkwende -->\n                    <div class=\"photo-thumbnail relative rounded-lg overflow-hidden shadow-md border-2 border-white group cursor-pointer gallery-thumbnail\" data-photo=\"0\">\n                        <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/e9d18ff3-c28a-4ed5-a4b8-09ed9d42cd2a.jpeg\" \n                             alt=\"Portr\u00e4t\" \n                             class=\"w-full h-full object-cover aspect-square\">\n                        <div class=\"absolute top-0 left-0 bg-barkwende\/80 text-white text-xs font-bold py-1 px-2 rounded-br z-10\">01<\/div>\n                        <div class=\"zoom-icon\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                            <\/svg>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"photo-thumbnail relative rounded-lg overflow-hidden shadow-md border-2 border-white group cursor-pointer gallery-thumbnail\" data-photo=\"1\">\n                        <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/7fa3236b-c324-42d5-ab66-43a5f1105687.jpeg\" \n                             alt=\"Portr\u00e4t\" \n                             class=\"w-full h-full object-cover aspect-square\">\n                        <div class=\"absolute top-0 left-0 bg-barkwende\/80 text-white text-xs font-bold py-1 px-2 rounded-br z-10\">02<\/div>\n                        <div class=\"zoom-icon\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                            <\/svg>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"photo-thumbnail relative rounded-lg overflow-hidden shadow-md border-2 border-white group cursor-pointer gallery-thumbnail\" data-photo=\"2\">\n                        <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/e693db03-abbe-4e87-a076-d83b846e86fc.jpeg\" \n                             alt=\"Portr\u00e4t\" \n                             class=\"w-full h-full object-cover aspect-square\">\n                        <div class=\"absolute top-0 left-0 bg-barkwende\/80 text-white text-xs font-bold py-1 px-2 rounded-br z-10\">03<\/div>\n                        <div class=\"zoom-icon\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                            <\/svg>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"photo-thumbnail relative rounded-lg overflow-hidden shadow-md border-2 border-white group cursor-pointer gallery-thumbnail\" data-photo=\"3\">\n                        <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/662b29f5-c001-4821-8d65-2614ac3d70b5.jpeg\" \n                             alt=\"Portr\u00e4t\" \n                             class=\"w-full h-full object-cover aspect-square\">\n                        <div class=\"absolute top-0 left-0 bg-barkwende\/80 text-white text-xs font-bold py-1 px-2 rounded-br z-10\">04<\/div>\n                        <div class=\"zoom-icon\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                            <\/svg>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                \n                <!-- Bande panoramique 1 -->\n                <div class=\"photo-thumbnail relative rounded-xl overflow-hidden shadow-md border-2 border-white group cursor-pointer gallery-thumbnail h-32 mb-6\" data-photo=\"4\">\n                    <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/0b16ae5c-269d-456e-8fee-45516cb3173b.jpeg\" \n                         alt=\"Panoramalandschaft\" \n                         class=\"w-full h-full object-cover\">\n                    <div class=\"absolute inset-0 bg-gradient-to-r from-barkwende\/60 to-transparent\"><\/div>\n                    <div class=\"absolute inset-0 flex items-center p-6 z-10\">\n                        <div>\n                            <h4 class=\"text-white text-lg font-bold drop-shadow-md\">Stadtlandschaft<\/h4>\n                            <p class=\"text-white\/90 text-sm drop-shadow-md hidden md:block\">Dokumentarische Panoramaansicht<\/p>\n                        <\/div>\n                    <\/div>\n                    <div class=\"zoom-icon\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                        <\/svg>\n                    <\/div>\n                <\/div>\n                \n                <!-- Deuxi\u00e8me rang\u00e9e de photos - Paysages -->\n                <div class=\"grid grid-cols-2 md:grid-cols-4 gap-3 mb-6\">\n                    <h3 class=\"col-span-full text-xl font-serif font-bold text-gray-800 mb-1\">Landschaften<\/h3>\n                    \n                    <div class=\"photo-thumbnail relative rounded-lg overflow-hidden shadow-md border-2 border-white group cursor-pointer gallery-thumbnail\" data-photo=\"5\">\n                        <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/0a94500a-5543-4871-aa17-3a4b1704e574.jpeg\" \n                             alt=\"Landschaft\" \n                             class=\"w-full h-full object-cover aspect-square\">\n                        <div class=\"absolute top-0 left-0 bg-barkwende\/80 text-white text-xs font-bold py-1 px-2 rounded-br z-10\">05<\/div>\n                        <div class=\"zoom-icon\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                            <\/svg>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"photo-thumbnail relative rounded-lg overflow-hidden shadow-md border-2 border-white group cursor-pointer gallery-thumbnail\" data-photo=\"6\">\n                        <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/1b9d0a39-4719-44f5-8e7e-2b4979358485.jpeg\" \n                             alt=\"Stadtlandschaft\" \n                             class=\"w-full h-full object-cover aspect-square\">\n                        <div class=\"absolute top-0 left-0 bg-barkwende\/80 text-white text-xs font-bold py-1 px-2 rounded-br z-10\">06<\/div>\n                        <div class=\"zoom-icon\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                            <\/svg>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"photo-thumbnail relative rounded-lg overflow-hidden shadow-md border-2 border-white group cursor-pointer gallery-thumbnail\" data-photo=\"7\">\n                        <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/02b5c036-6519-4d6d-ada3-6589c7873345.jpeg\" \n                             alt=\"Portr\u00e4t\" \n                             class=\"w-full h-full object-cover aspect-square\">\n                        <div class=\"absolute top-0 left-0 bg-barkwende\/80 text-white text-xs font-bold py-1 px-2 rounded-br z-10\">07<\/div>\n                        <div class=\"zoom-icon\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                            <\/svg>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"photo-thumbnail relative rounded-lg overflow-hidden shadow-md border-2 border-white group cursor-pointer gallery-thumbnail\" data-photo=\"8\">\n                        <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/6b3d72d0-8638-49e4-ae89-931e3b4cb25f.jpeg\" \n                             alt=\"Landschaft\" \n                             class=\"w-full h-full object-cover aspect-square\">\n                        <div class=\"absolute top-0 left-0 bg-barkwende\/80 text-white text-xs font-bold py-1 px-2 rounded-br z-10\">08<\/div>\n                        <div class=\"zoom-icon\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                            <\/svg>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                \n                <!-- Bande panoramique 2 -->\n                <div class=\"photo-thumbnail relative rounded-xl overflow-hidden shadow-md border-2 border-white group cursor-pointer gallery-thumbnail h-32 mb-6\" data-photo=\"9\">\n                    <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/73f388ac-136b-4481-aa02-a4d5a052a070.jpeg\" \n                         alt=\"Panoramalandschaft\" \n                         class=\"w-full h-full object-cover\">\n                    <div class=\"absolute inset-0 bg-gradient-to-r from-barkwende\/60 to-transparent\"><\/div>\n                    <div class=\"absolute inset-0 flex items-center p-6 z-10\">\n                        <div>\n                            <h4 class=\"text-white text-lg font-bold drop-shadow-md\">L\u00e4ndliche Landschaft<\/h4>\n                            <p class=\"text-white\/90 text-sm drop-shadow-md hidden md:block\">Nat\u00fcrliches Licht und Perspektiven<\/p>\n                        <\/div>\n                    <\/div>\n                    <div class=\"zoom-icon\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                        <\/svg>\n                    <\/div>\n                <\/div>\n                \n                <!-- Troisi\u00e8me rang\u00e9e de photos -->\n                <div class=\"grid grid-cols-2 md:grid-cols-4 gap-3 mb-6\">\n                    <div class=\"photo-thumbnail relative rounded-lg overflow-hidden shadow-md border-2 border-white group cursor-pointer gallery-thumbnail\" data-photo=\"10\">\n                        <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/7f59ff3f-da15-49b1-8c75-e2a6ae576ad5.jpeg\" \n                             alt=\"Landschaft\" \n                             class=\"w-full h-full object-cover aspect-square\">\n                        <div class=\"absolute top-0 left-0 bg-barkwende\/80 text-white text-xs font-bold py-1 px-2 rounded-br z-10\">09<\/div>\n                        <div class=\"zoom-icon\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                            <\/svg>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"photo-thumbnail relative rounded-lg overflow-hidden shadow-md border-2 border-white group cursor-pointer gallery-thumbnail\" data-photo=\"11\">\n                        <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/8c67dbc0-f3f1-47cf-b13e-bd056fe0bc5c.jpeg\" \n                             alt=\"Landschaft\" \n                             class=\"w-full h-full object-cover aspect-square\">\n                        <div class=\"absolute top-0 left-0 bg-barkwende\/80 text-white text-xs font-bold py-1 px-2 rounded-br z-10\">10<\/div>\n                        <div class=\"zoom-icon\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                            <\/svg>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"photo-thumbnail relative rounded-lg overflow-hidden shadow-md border-2 border-white group cursor-pointer gallery-thumbnail\" data-photo=\"12\">\n                        <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/12d9a930-1fb5-42c2-aae2-96ec33337d54.jpeg\" \n                             alt=\"Stadtlandschaft\" \n                             class=\"w-full h-full object-cover aspect-square\">\n                        <div class=\"absolute top-0 left-0 bg-barkwende\/80 text-white text-xs font-bold py-1 px-2 rounded-br z-10\">11<\/div>\n                        <div class=\"zoom-icon\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                            <\/svg>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"photo-thumbnail relative rounded-lg overflow-hidden shadow-md border-2 border-white group cursor-pointer gallery-thumbnail\" data-photo=\"13\">\n                        <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/32b9057e-33d5-49ca-9f5c-0b5d2597bce6.jpeg\" \n                             alt=\"Portr\u00e4t\" \n                             class=\"w-full h-full object-cover aspect-square\">\n                        <div class=\"absolute top-0 left-0 bg-barkwende\/80 text-white text-xs font-bold py-1 px-2 rounded-br z-10\">12<\/div>\n                        <div class=\"zoom-icon\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                            <\/svg>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                \n                <!-- Quatri\u00e8me rang\u00e9e de photos -->\n                <div class=\"grid grid-cols-2 md:grid-cols-4 gap-3 mb-6\">\n                    <div class=\"photo-thumbnail relative rounded-lg overflow-hidden shadow-md border-2 border-white group cursor-pointer gallery-thumbnail\" data-photo=\"14\">\n                        <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/54ed0e3b-6897-4219-99c1-8758ff43ee06.jpeg\" \n                             alt=\"Landschaft\" \n                             class=\"w-full h-full object-cover aspect-square\">\n                        <div class=\"absolute top-0 left-0 bg-barkwende\/80 text-white text-xs font-bold py-1 px-2 rounded-br z-10\">13<\/div>\n                        <div class=\"zoom-icon\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                            <\/svg>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"photo-thumbnail relative rounded-lg overflow-hidden shadow-md border-2 border-white group cursor-pointer gallery-thumbnail\" data-photo=\"15\">\n                        <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/60c76aca-fe06-4b3f-9d18-7e950165513c.jpeg\" \n                             alt=\"Landschaft\" \n                             class=\"w-full h-full object-cover aspect-square\">\n                        <div class=\"absolute top-0 left-0 bg-barkwende\/80 text-white text-xs font-bold py-1 px-2 rounded-br z-10\">14<\/div>\n                        <div class=\"zoom-icon\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                            <\/svg>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"photo-thumbnail relative rounded-lg overflow-hidden shadow-md border-2 border-white group cursor-pointer gallery-thumbnail\" data-photo=\"16\">\n                        <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/76e3e99d-0d2f-4e65-8fbf-bbb34187b48b.jpeg\" \n                             alt=\"Landschaft\" \n                             class=\"w-full h-full object-cover aspect-square\">\n                        <div class=\"absolute top-0 left-0 bg-barkwende\/80 text-white text-xs font-bold py-1 px-2 rounded-br z-10\">15<\/div>\n                        <div class=\"zoom-icon\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                            <\/svg>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"photo-thumbnail relative rounded-lg overflow-hidden shadow-md border-2 border-white group cursor-pointer gallery-thumbnail\" data-photo=\"17\">\n                        <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/78f77a3e-fa6b-4114-848d-207abe0f09c5.jpeg\" \n                             alt=\"Panoramalandschaft\" \n                             class=\"w-full h-full object-cover aspect-square\">\n                        <div class=\"absolute top-0 left-0 bg-barkwende\/80 text-white text-xs font-bold py-1 px-2 rounded-br z-10\">16<\/div>\n                        <div class=\"zoom-icon\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                            <\/svg>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                \n                <!-- Bande panoramique 3 -->\n                <div class=\"photo-thumbnail relative rounded-xl overflow-hidden shadow-md border-2 border-white group cursor-pointer gallery-thumbnail h-32 mb-6\" data-photo=\"18\">\n                    <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/81b49c9c-b370-4c38-991b-f3d426b3e2b9.jpeg\" \n                         alt=\"Panoramalandschaft\" \n                         class=\"w-full h-full object-cover\">\n                    <div class=\"absolute inset-0 bg-gradient-to-r from-barkwende\/60 to-transparent\"><\/div>\n                    <div class=\"absolute inset-0 flex items-center p-6 z-10\">\n                        <div>\n                            <h4 class=\"text-white text-lg font-bold drop-shadow-md\">St\u00e4dtischer Horizont<\/h4>\n                            <p class=\"text-white\/90 text-sm drop-shadow-md hidden md:block\">Architektonische Perspektiven<\/p>\n                        <\/div>\n                    <\/div>\n                    <div class=\"zoom-icon\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                        <\/svg>\n                    <\/div>\n                <\/div>\n                \n                <!-- Cinqui\u00e8me rang\u00e9e de photos -->\n                <div class=\"grid grid-cols-2 md:grid-cols-4 gap-3 mb-10\">\n                    <div class=\"photo-thumbnail relative rounded-lg overflow-hidden shadow-md border-2 border-white group cursor-pointer gallery-thumbnail\" data-photo=\"19\">\n                        <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/92d9491c-2b1c-43ae-9287-9b7af5f37f67.jpeg\" \n                             alt=\"Landschaft\" \n                             class=\"w-full h-full object-cover aspect-square\">\n                        <div class=\"absolute top-0 left-0 bg-barkwende\/80 text-white text-xs font-bold py-1 px-2 rounded-br z-10\">17<\/div>\n                        <div class=\"zoom-icon\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                            <\/svg>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"photo-thumbnail relative rounded-lg overflow-hidden shadow-md border-2 border-white group cursor-pointer gallery-thumbnail\" data-photo=\"20\">\n                        <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/709cc12a-f193-4295-bffd-357d0c2994f7.jpeg\" \n                             alt=\"Portr\u00e4t\" \n                             class=\"w-full h-full object-cover aspect-square\">\n                        <div class=\"absolute top-0 left-0 bg-barkwende\/80 text-white text-xs font-bold py-1 px-2 rounded-br z-10\">18<\/div>\n                        <div class=\"zoom-icon\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                            <\/svg>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"photo-thumbnail relative rounded-lg overflow-hidden shadow-md border-2 border-white group cursor-pointer gallery-thumbnail\" data-photo=\"21\">\n                        <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/870efad2-b4f5-4d02-8622-acb318ca7474.jpeg\" \n                             alt=\"Landschaft\" \n                             class=\"w-full h-full object-cover aspect-square\">\n                        <div class=\"absolute top-0 left-0 bg-barkwende\/80 text-white text-xs font-bold py-1 px-2 rounded-br z-10\">19<\/div>\n                        <div class=\"zoom-icon\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                            <\/svg>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"photo-thumbnail relative rounded-lg overflow-hidden shadow-md border-2 border-white group cursor-pointer gallery-thumbnail\" data-photo=\"22\">\n                        <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/2278df31-05f8-42a7-a16c-74ebe3517cb8.jpeg\" \n                             alt=\"Landschaft\" \n                             class=\"w-full h-full object-cover aspect-square\">\n                        <div class=\"absolute top-0 left-0 bg-barkwende\/80 text-white text-xs font-bold py-1 px-2 rounded-br z-10\">20<\/div>\n                        <div class=\"zoom-icon\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                            <\/svg>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                \n                <!-- Sixi\u00e8me rang\u00e9e de photos -->\n                <div class=\"grid grid-cols-2 md:grid-cols-4 gap-3 mb-10\">\n                    <h3 class=\"col-span-full text-xl font-serif font-bold text-gray-800 mb-1\">Portr\u00e4ts und Landschaften<\/h3>\n                    \n                    <div class=\"photo-thumbnail relative rounded-lg overflow-hidden shadow-md border-2 border-white group cursor-pointer gallery-thumbnail\" data-photo=\"23\">\n                        <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/2735fd5c-49e6-4607-9820-cda856d81eb7.jpeg\" \n                             alt=\"Portr\u00e4t\" \n                             class=\"w-full h-full object-cover aspect-square\">\n                        <div class=\"absolute top-0 left-0 bg-barkwende\/80 text-white text-xs font-bold py-1 px-2 rounded-br z-10\">21<\/div>\n                        <div class=\"zoom-icon\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                            <\/svg>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"photo-thumbnail relative rounded-lg overflow-hidden shadow-md border-2 border-white group cursor-pointer gallery-thumbnail\" data-photo=\"24\">\n                        <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/3880da17-c546-4a7d-8aa4-572fc1bc67a3.jpeg\" \n                             alt=\"Panoramalandschaft\" \n                             class=\"w-full h-full object-cover aspect-square\">\n                        <div class=\"absolute top-0 left-0 bg-barkwende\/80 text-white text-xs font-bold py-1 px-2 rounded-br z-10\">22<\/div>\n                        <div class=\"zoom-icon\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                            <\/svg>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"photo-thumbnail relative rounded-lg overflow-hidden shadow-md border-2 border-white group cursor-pointer gallery-thumbnail\" data-photo=\"25\">\n                        <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/4062b3db-6744-4b3b-a96f-767310a6735e.jpeg\" \n                             alt=\"Landschaft\" \n                             class=\"w-full h-full object-cover aspect-square\">\n                        <div class=\"absolute top-0 left-0 bg-barkwende\/80 text-white text-xs font-bold py-1 px-2 rounded-br z-10\">23<\/div>\n                        <div class=\"zoom-icon\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                            <\/svg>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"photo-thumbnail relative rounded-lg overflow-hidden shadow-md border-2 border-white group cursor-pointer gallery-thumbnail\" data-photo=\"26\">\n                        <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/60004b20-aedb-4ae9-b3ca-baa148398bdf.jpeg\" \n                             alt=\"Landschaft\" \n                             class=\"w-full h-full object-cover aspect-square\">\n                        <div class=\"absolute top-0 left-0 bg-barkwende\/80 text-white text-xs font-bold py-1 px-2 rounded-br z-10\">24<\/div>\n                        <div class=\"zoom-icon\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                            <\/svg>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                \n                <!-- Septi\u00e8me rang\u00e9e de photos - Derni\u00e8re rang\u00e9e -->\n                <div class=\"grid grid-cols-2 md:grid-cols-4 gap-3 mb-10\">\n                    <div class=\"photo-thumbnail relative rounded-lg overflow-hidden shadow-md border-2 border-white group cursor-pointer gallery-thumbnail\" data-photo=\"27\">\n                        <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/820261f9-6a68-4da4-ac6a-4aaa219d2423.jpeg\" \n                             alt=\"Landschaft\" \n                             class=\"w-full h-full object-cover aspect-square\">\n                        <div class=\"absolute top-0 left-0 bg-barkwende\/80 text-white text-xs font-bold py-1 px-2 rounded-br z-10\">25<\/div>\n                        <div class=\"zoom-icon\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                            <\/svg>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"photo-thumbnail relative rounded-lg overflow-hidden shadow-md border-2 border-white group cursor-pointer gallery-thumbnail\" data-photo=\"28\">\n                        <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/52239535-0108-4b02-b3b3-1d9d9fb3af69.jpeg\" \n                             alt=\"Landschaft\" \n                             class=\"w-full h-full object-cover aspect-square\">\n                        <div class=\"absolute top-0 left-0 bg-barkwende\/80 text-white text-xs font-bold py-1 px-2 rounded-br z-10\">26<\/div>\n                        <div class=\"zoom-icon\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                            <\/svg>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"photo-thumbnail relative rounded-lg overflow-hidden shadow-md border-2 border-white group cursor-pointer gallery-thumbnail\" data-photo=\"29\">\n                        <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/a1d31450-8b7b-4d98-b5c5-5bc6d24d49e2.jpeg\" \n                             alt=\"Landschaft\" \n                             class=\"w-full h-full object-cover aspect-square\">\n                        <div class=\"absolute top-0 left-0 bg-barkwende\/80 text-white text-xs font-bold py-1 px-2 rounded-br z-10\">27<\/div>\n                        <div class=\"zoom-icon\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                            <\/svg>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"photo-thumbnail relative rounded-lg overflow-hidden shadow-md border-2 border-white group cursor-pointer gallery-thumbnail\" data-photo=\"30\">\n                        <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/c06df8dc-2276-4602-b3aa-287562a7a8f3.jpeg\" \n                             alt=\"Portr\u00e4t\" \n                             class=\"w-full h-full object-cover aspect-square\">\n                        <div class=\"absolute top-0 left-0 bg-barkwende\/80 text-white text-xs font-bold py-1 px-2 rounded-br z-10\">28<\/div>\n                        <div class=\"zoom-icon\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                            <\/svg>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                \n                <!-- Derni\u00e8re bande panoramique -->\n                <div class=\"photo-thumbnail relative rounded-xl overflow-hidden shadow-md border-2 border-white group cursor-pointer gallery-thumbnail h-32 mb-6\" data-photo=\"31\">\n                    <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/d4ab03c4-27af-434c-99d1-0227896f4e5d.jpeg\" \n                         alt=\"Panoramalandschaft\" \n                         class=\"w-full h-full object-cover\">\n                    <div class=\"absolute inset-0 bg-gradient-to-r from-barkwende\/60 to-transparent\"><\/div>\n                    <div class=\"absolute inset-0 flex items-center p-6 z-10\">\n                        <div>\n                            <h4 class=\"text-white text-lg font-bold drop-shadow-md\">St\u00e4dtische Perspektive<\/h4>\n                            <p class=\"text-white\/90 text-sm drop-shadow-md hidden md:block\">Licht und Architektur<\/p>\n                        <\/div>\n                    <\/div>\n                    <div class=\"zoom-icon\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-4 w-4 text-barkwende\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/>\n                        <\/svg>\n                    <\/div>\n                <\/div>\n                \n                <!-- Miniatures en style polaroid -->\n                <div class=\"flex flex-wrap gap-3 justify-center mt-8\">\n                    <h4 class=\"w-full text-center text-sm font-medium text-gray-500 mb-2\">Vergr\u00f6\u00dfern<\/h4>\n                    <div class=\"flex flex-wrap gap-3 justify-center\">\n                        <div class=\"w-16 h-16 md:w-20 md:h-20 bg-white p-1 rounded shadow -rotate-2 hover:rotate-1 transition-transform cursor-pointer gallery-thumbnail\" data-photo=\"0\">\n                            <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/e9d18ff3-c28a-4ed5-a4b8-09ed9d42cd2a.jpeg\" \n                                alt=\"\" class=\"w-full h-full object-cover rounded\">\n                        <\/div>\n                        <div class=\"w-16 h-16 md:w-20 md:h-20 bg-white p-1 rounded shadow rotate-1 hover:-rotate-1 transition-transform cursor-pointer gallery-thumbnail\" data-photo=\"4\">\n                            <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/0b16ae5c-269d-456e-8fee-45516cb3173b.jpeg\" \n                                alt=\"\" class=\"w-full h-full object-cover rounded\">\n                        <\/div>\n                        \n                        <div class=\"w-16 h-16 md:w-20 md:h-20 bg-white p-1 rounded shadow rotate-2 hover:-rotate-1 transition-transform cursor-pointer gallery-thumbnail\" data-photo=\"6\">\n                            <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/1b9d0a39-4719-44f5-8e7e-2b4979358485.jpeg\" \n                                alt=\"\" class=\"w-full h-full object-cover rounded\">\n                        <\/div>\n                        <div class=\"w-16 h-16 md:w-20 md:h-20 bg-white p-1 rounded shadow -rotate-1 hover:rotate-2 transition-transform cursor-pointer gallery-thumbnail\" data-photo=\"8\">\n                            <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/6b3d72d0-8638-49e4-ae89-931e3b4cb25f.jpeg\" \n                                alt=\"\" class=\"w-full h-full object-cover rounded\">\n                        <\/div>\n                        <div class=\"w-16 h-16 md:w-20 md:h-20 bg-white p-1 rounded shadow rotate-1 hover:-rotate-2 transition-transform cursor-pointer gallery-thumbnail\" data-photo=\"9\">\n                            <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/73f388ac-136b-4481-aa02-a4d5a052a070.jpeg\" \n                                alt=\"\" class=\"w-full h-full object-cover rounded\">\n                        <\/div>\n                        <div class=\"w-16 h-16 md:w-20 md:h-20 bg-white p-1 rounded shadow -rotate-2 hover:rotate-1 transition-transform cursor-pointer gallery-thumbnail\" data-photo=\"18\">\n                            <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/81b49c9c-b370-4c38-991b-f3d426b3e2b9.jpeg\" \n                                alt=\"\" class=\"w-full h-full object-cover rounded\">\n                        <\/div>\n                        <div class=\"w-16 h-16 md:w-20 md:h-20 bg-white p-1 rounded shadow rotate-2 hover:-rotate-1 transition-transform cursor-pointer gallery-thumbnail\" data-photo=\"31\">\n                            <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/d4ab03c4-27af-434c-99d1-0227896f4e5d.jpeg\" \n                                alt=\"\" class=\"w-full h-full object-cover rounded\">\n                        <\/div>\n                        <div class=\"w-16 h-16 md:w-20 md:h-20 bg-white p-1 rounded shadow -rotate-1 hover:rotate-2 transition-transform cursor-pointer gallery-thumbnail\" data-photo=\"33\">\n                            <img decoding=\"async\" src=\"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/f063149a-28ef-4bdb-9a4d-46f27046b18f.jpeg\" \n                                alt=\"\" class=\"w-full h-full object-cover rounded\">\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n        \n        <div id=\"lightbox-gallery\" class=\"lightbox\">\n            <div id=\"lightbox-content\" class=\"lightbox-content\">\n                <img decoding=\"async\" id=\"lightbox-img-gallery\" src=\"\" alt=\"Vollbild\" class=\"lightbox-img\" title=\"Klicken, um die Originalgr\u00f6\u00dfe anzuzeigen\">\n                <div class=\"absolute bottom-0 left-0 right-0 caption-overlay p-4\">\n                    <p id=\"lightbox-caption-gallery\" class=\"text-white text-center\"><\/p>\n                <\/div>\n                <button id=\"lightbox-close-gallery\" class=\"lightbox-close absolute top-4 right-4 text-white\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" \/>\n                    <\/svg>\n                <\/button>\n                <button id=\"lightbox-prev-gallery\" class=\"lightbox-prev absolute left-4 top-1\/2 transform -translate-y-1\/2 text-white\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\" \/>\n                    <\/svg>\n                <\/button>\n                <button id=\"lightbox-next-gallery\" class=\"lightbox-next absolute right-4 top-1\/2 transform -translate-y-1\/2 text-white\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\" \/>\n                    <\/svg>\n                <\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<script>\n        \/\/ Script pour activer la lightbox\n    document.addEventListener('DOMContentLoaded', function() {\n        const thumbnails = document.querySelectorAll('.gallery-thumbnail');\n        const lightbox = document.getElementById('lightbox-gallery');\n        const lightboxContent = document.getElementById('lightbox-content');\n        const lightboxImg = document.getElementById('lightbox-img-gallery');\n        const lightboxCaption = document.getElementById('lightbox-caption-gallery');\n        const lightboxClose = document.getElementById('lightbox-close-gallery');\n        const lightboxPrev = document.getElementById('lightbox-prev-gallery');\n        const lightboxNext = document.getElementById('lightbox-next-gallery');\n        \n        let currentPhotoIndex = 0;\n        let isFullSize = false;\n        const photos = [\n            \/\/ Portraits\n            { src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/e9d18ff3-c28a-4ed5-a4b8-09ed9d42cd2a.jpeg\", caption: \"Portr\u00e4t 01\" },\n            { src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/7fa3236b-c324-42d5-ab66-43a5f1105687.jpeg\", caption: \"Portr\u00e4t 02\" },\n            { src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/e693db03-abbe-4e87-a076-d83b846e86fc.jpeg\", caption: \"Portr\u00e4t 03\" },\n            { src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/662b29f5-c001-4821-8d65-2614ac3d70b5.jpeg\", caption: \"Portr\u00e4t 04\" },\n            \/\/ Panoramique\n            { src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/0b16ae5c-269d-456e-8fee-45516cb3173b.jpeg\", caption: \"Stadtlandschaft - Dokumentarische Panoramaansicht\" },\n            \/\/ Paysages\n            { src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/0a94500a-5543-4871-aa17-3a4b1704e574.jpeg\", caption: \"Landschaft 05\" },\n            { src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/1b9d0a39-4719-44f5-8e7e-2b4979358485.jpeg\", caption: \"Stadtlandschaft 06\" },\n            { src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/02b5c036-6519-4d6d-ada3-6589c7873345.jpeg\", caption: \"Portr\u00e4t 07\" },\n            { src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/6b3d72d0-8638-49e4-ae89-931e3b4cb25f.jpeg\", caption: \"Landschaft 08\" },\n            \/\/ Panoramique\n            { src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/73f388ac-136b-4481-aa02-a4d5a052a070.jpeg\", caption: \"L\u00e4ndliche Landschaft - Nat\u00fcrliches Licht und Perspektiven\" },\n            \/\/ Autres photos\n            { src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/7f59ff3f-da15-49b1-8c75-e2a6ae576ad5.jpeg\", caption: \"Landschaft 09\" },\n            { src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/8c67dbc0-f3f1-47cf-b13e-bd056fe0bc5c.jpeg\", caption: \"Landschaft 10\" },\n            { src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/12d9a930-1fb5-42c2-aae2-96ec33337d54.jpeg\", caption: \"Stadtlandschaft 11\" },\n            { src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/32b9057e-33d5-49ca-9f5c-0b5d2597bce6.jpeg\", caption: \"Portr\u00e4t 12\" },\n            { src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/54ed0e3b-6897-4219-99c1-8758ff43ee06.jpeg\", caption: \"Landschaft 13\" },\n            { src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/60c76aca-fe06-4b3f-9d18-7e950165513c.jpeg\", caption: \"Landschaft 14\" },\n            { src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/76e3e99d-0d2f-4e65-8fbf-bbb34187b48b.jpeg\", caption: \"Landschaft 15\" },\n            { src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/78f77a3e-fa6b-4114-848d-207abe0f09c5.jpeg\", caption: \"Panoramalandschaft 16\" },\n            \/\/ Panoramique\n            { src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/81b49c9c-b370-4c38-991b-f3d426b3e2b9.jpeg\", caption: \"St\u00e4dtischer Horizont - Architektonische Perspektiven\" },\n            { src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/92d9491c-2b1c-43ae-9287-9b7af5f37f67.jpeg\", caption: \"Landschaft 17\" },\n            { src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/709cc12a-f193-4295-bffd-357d0c2994f7.jpeg\", caption: \"Portr\u00e4t 18\" },\n            { src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/870efad2-b4f5-4d02-8622-acb318ca7474.jpeg\", caption: \"Landschaft 19\" },\n            { src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/2278df31-05f8-42a7-a16c-74ebe3517cb8.jpeg\", caption: \"Landschaft 20\" },\n            { src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/2735fd5c-49e6-4607-9820-cda856d81eb7.jpeg\", caption: \"Portr\u00e4t 21\" },\n            { src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/3880da17-c546-4a7d-8aa4-572fc1bc67a3.jpeg\", caption: \"Panoramalandschaft 22\" },\n            { src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/4062b3db-6744-4b3b-a96f-767310a6735e.jpeg\", caption: \"Landschaft 23\" },\n            { src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/60004b20-aedb-4ae9-b3ca-baa148398bdf.jpeg\", caption: \"Landschaft 24\" },\n            { src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/820261f9-6a68-4da4-ac6a-4aaa219d2423.jpeg\", caption: \"Landschaft 25\" },\n            { src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/52239535-0108-4b02-b3b3-1d9d9fb3af69.jpeg\", caption: \"Landschaft 26\" },\n            { src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/a1d31450-8b7b-4d98-b5c5-5bc6d24d49e2.jpeg\", caption: \"Landschaft 27\" },\n            { src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/c06df8dc-2276-4602-b3aa-287562a7a8f3.jpeg\", caption: \"Portr\u00e4t 28\" },\n            \/\/ Panoramique\n            { src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/d4ab03c4-27af-434c-99d1-0227896f4e5d.jpeg\", caption: \"St\u00e4dtische Perspektive - Licht und Architektur\" },\n            { src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/d5bc8038-e563-441e-a1fa-54d6333e97c9.jpeg\", caption: \"Landschaft 30\" },\n            { src: \"https:\/\/barkwende.de\/wp-content\/uploads\/2025\/04\/f063149a-28ef-4bdb-9a4d-46f27046b18f.jpeg\", caption: \"Panoramalandschaft 31\" }\n        ];\n        \n        \/\/ Ouvrir la lightbox\n        thumbnails.forEach(thumbnail => {\n            thumbnail.addEventListener('click', function() {\n                const photoIndex = parseInt(this.getAttribute('data-photo'));\n                openLightbox(photoIndex);\n            });\n        });\n        \n        \/\/ Basculer entre taille ajust\u00e9e et taille r\u00e9elle\n        lightboxImg.addEventListener('click', function() {\n            toggleFullSize();\n        });\n        \n        \/\/ Fermer la lightbox\n        lightboxClose.addEventListener('click', function() {\n            lightbox.classList.remove('active');\n            resetFullSize();\n        });\n        \n        \/\/ Navigation\n        lightboxPrev.addEventListener('click', function() {\n            if (isFullSize) {\n                resetFullSize();\n            }\n            currentPhotoIndex = (currentPhotoIndex - 1 + photos.length) % photos.length;\n            updateLightbox();\n        });\n        \n        lightboxNext.addEventListener('click', function() {\n            if (isFullSize) {\n                resetFullSize();\n            }\n            currentPhotoIndex = (currentPhotoIndex + 1) % photos.length;\n            updateLightbox();\n        });\n        \n        \/\/ Fonctions\n        function openLightbox(index) {\n            currentPhotoIndex = index;\n            resetFullSize();\n            updateLightbox();\n            lightbox.classList.add('active');\n        }\n        \n        function toggleFullSize() {\n            isFullSize = !isFullSize;\n            if (isFullSize) {\n                lightboxImg.classList.add('full-size');\n                lightboxContent.classList.add('full-size-mode');\n                lightboxImg.title = \"Klicken, um die Ansicht anzupassen\";\n                \n                \/\/ Assurer que l'image est agrandie en fonction de ses dimensions r\u00e9elles\n                const img = new Image();\n                img.src = lightboxImg.src;\n                img.onload = function() {\n                    \/\/ Si l'image est naturellement petite, appliquer un zoom plus important\n                    if (this.naturalWidth < 800) {\n                        lightboxImg.style.transform = \"scale(2.5)\";\n                    } else if (this.naturalWidth < 1200) {\n                        lightboxImg.style.transform = \"scale(2)\";\n                    } else {\n                        lightboxImg.style.transform = \"scale(1.5)\";\n                    }\n                };\n            } else {\n                resetFullSize();\n            }\n        }\n        \n        function resetFullSize() {\n            isFullSize = false;\n            lightboxImg.classList.remove('full-size');\n            lightboxContent.classList.remove('full-size-mode');\n            lightboxImg.title = \"Klicken, um die Originalgr\u00f6\u00dfe anzuzeigen\";\n        }\n        \n        function updateLightbox() {\n            lightboxImg.src = photos[currentPhotoIndex].src;\n            lightboxCaption.textContent = photos[currentPhotoIndex].caption;\n            \n            \/\/ Ajuster la taille de l'image en fonction de ses proportions seulement si pas en mode taille r\u00e9elle\n            if (!isFullSize) {\n                lightboxImg.onload = function() {\n                    const imgWidth = this.naturalWidth;\n                    const imgHeight = this.naturalHeight;\n                    const ratio = imgWidth \/ imgHeight;\n                    \n                    if (ratio > 1.5) {\n                        \/\/ Image panoramique ou paysage\n                        this.style.width = \"98%\";\n                        this.style.height = \"auto\";\n                    } else if (ratio < 0.7) {\n                        \/\/ Image portrait\n                        this.style.height = \"95vh\";\n                        this.style.width = \"auto\";\n                        \/\/ Assurez-vous que l'image n'est pas trop petite en largeur\n                        setTimeout(() => {\n                            if (this.clientWidth < window.innerWidth * 0.6) {\n                                this.style.width = \"60%\";\n                                this.style.height = \"auto\";\n                            }\n                        }, 50);\n                    } else {\n                        \/\/ Image carr\u00e9e ou proche du carr\u00e9\n                        this.style.width = \"95%\";\n                        this.style.height = \"auto\";\n                    }\n                };\n            }\n        }\n        \n        \/\/ Fermer avec Escape\n        document.addEventListener('keydown', function(e) {\n            if (e.key === 'Escape') {\n                if (isFullSize) {\n                    resetFullSize();\n                    updateLightbox();\n                } else if (lightbox.classList.contains('active')) {\n                    lightbox.classList.remove('active');\n                }\n            }\n        });\n    });\n<\/script>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Nos moments en images D\u00e9couvrez les temps forts de nos activit\u00e9s \u00e0 travers cette galerie de photos organis\u00e9e par \u00e9v\u00e9nement. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-393","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/barkwende.de\/en\/wp-json\/wp\/v2\/pages\/393","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/barkwende.de\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/barkwende.de\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/barkwende.de\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/barkwende.de\/en\/wp-json\/wp\/v2\/comments?post=393"}],"version-history":[{"count":144,"href":"https:\/\/barkwende.de\/en\/wp-json\/wp\/v2\/pages\/393\/revisions"}],"predecessor-version":[{"id":689,"href":"https:\/\/barkwende.de\/en\/wp-json\/wp\/v2\/pages\/393\/revisions\/689"}],"wp:attachment":[{"href":"https:\/\/barkwende.de\/en\/wp-json\/wp\/v2\/media?parent=393"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}