  /* Slide-Animationen für Seitenwechsel */
  body.slide-left {
    animation: pageSlideLeft 0.45s ease-out forwards;
  }
  body.slide-right {
    animation: pageSlideRight 0.45s ease-out forwards;
  }
  @keyframes pageSlideLeft {
    from { transform: translateX(0); opacity: 1; }
    to   { transform: translateX(-40%); opacity: 0; }
  }
  @keyframes pageSlideRight {
    from { transform: translateX(0); opacity: 1; }
    to   { transform: translateX(40%); opacity: 0; }
  }

   <script>   
   document.addEventListener('DOMContentLoaded', function () {
     // Aktuellen Pfad ermitteln
     var path = window.location.pathname;
     var lowerPath = path.toLowerCase();
   
     // Sprachprefix identifizieren (EN, DE, ES)
     var langPrefix = '/';
     if (lowerPath.startsWith('/de/')) {
       langPrefix = '/DE/';
     } else if (lowerPath.startsWith('/es/')) {
       langPrefix = '/ES/';
     }
   
     // Seiten-Pfade für jede Sprache in der richtigen Reihenfolge
     var pages = [
       langPrefix + "index.html",
       langPrefix + "how.html",
       langPrefix + "Dim-Light.html",
       langPrefix + "Bambu-classic.html",
       langPrefix + "Bambu-Pendula.html",
       langPrefix + "Bambu-linea.html",
       langPrefix + "Bambu-wall-ML.html",
       langPrefix + "B-Flama.html",
       langPrefix + "Bambu-Out.html",
       langPrefix + "Flama-Out+Solar.html",
       langPrefix + "strato-1.html",
       langPrefix + "sphare_1.html",
       langPrefix + "Technical-Details+-Order.html",
       langPrefix + "Legal+-Privacy.html",
       langPrefix + "Contact.html"
     ];
   
     var filename = path.split('/').pop() || 'index.html';
     filename = filename.split('?')[0].split('#')[0].toLowerCase();
   
     // Position der aktuellen Seite in der Seitenliste finden
     var index = pages.findIndex(function (p) {
       return p.toLowerCase().endsWith("/" + filename);
     });
   
     if (index === -1) return;  // Wenn die Seite nicht in der Liste ist, dann kein Swipe.
   
     var startX = null;
     var startY = null;
     var isNavigating = false;
     var ANIM_DURATION = 450; // Dauer der Animation (in ms)
   
     function goToPage(targetIndex, direction) {
       if (isNavigating) return;
       isNavigating = true;
   
       // Animation starten
       if (direction === 'left') {
         document.body.classList.add('slide-left');
       } else if (direction === 'right') {
         document.body.classList.add('slide-right');
       }
   
       setTimeout(function () {
         window.location.href = pages[targetIndex];
       }, ANIM_DURATION);
     }
   
     // Touchstart-Event: Wenn der Benutzer mit dem Wischen beginnt
     window.addEventListener('touchstart', function (e) {
       if (e.touches.length !== 1) return;
       startX = e.touches[0].clientX;
       startY = e.touches[0].clientY;
     }, { passive: true });
   
     // Touchend-Event: Wenn der Benutzer das Wischen beendet
     window.addEventListener('touchend', function (e) {
       if (startX === null || isNavigating) return;
   
       var endX = e.changedTouches[0].clientX;
       var endY = e.changedTouches[0].clientY;
   
       var dx = endX - startX;
       var dy = endY - startY;
   
       // Nur horizontale Wischer
       if (Math.abs(dx) < 50 || Math.abs(dx) < Math.abs(dy)) {
         startX = null;
         return;
       }
   
       // nach links wischen => nächste Seite
       if (dx < 0 && index < pages.length - 1) {
         goToPage(index + 1, 'left');
       } else if (dx > 0 && index > 0) {
         // nach rechts wischen => vorherige Seite
         goToPage(index - 1, 'right');
       }
   
       startX = null;
     }, { passive: true });
   });
   </script>
<!doctype html>
<html>
<head>
<meta property="og:title" content="Luminare – Handcrafted Lighting Objects">
<meta property="og:description" content="Handmade, bespoke lighting sculptures for interiors and architecture. BAMBU, STRATO, SPHERE.">
<meta property="og:image" content="https://luminare.design/assets/brand/og-image.jpg">
<meta property="og:type" content="website">
<meta property="og:url" content="https://luminare.design/">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Luminare – Bespoke Lighting">
<meta name="twitter:description" content="Handcrafted architectural and interior lighting. Made to order.">
<meta name="twitter:image" content="https://luminare.design/assets/brand/og-image.jpg">
<script type="application/ld+json">   
   {
     "@context": "https://schema.org",
     "@type": "Organization",
     "name": "Luminare",
     "url": "https://luminare.design",
     "logo": "https://luminare.design/assets/brand/logo.png",
     "description": "Handcrafted lighting objects and bespoke light sculptures made to order.",
     "sameAs": [
       "https://instagram.com/DEIN_INSTAGRAM",
       "https://linkedin.com/DEIN_LINKEDIN"
     ]
   }
</script>
<meta charset="utf-8">
<title>BAMBU Kollektion – Architektonische Bambus-Lichtobjekte | Luminare</title>
<meta name="description" content="BAMBU is a collection of handmade bamboo lighting objects crafted as unique art pieces. Each pendant, wall lamp and floor lamp is made to order. Natural materials, warm diffusion, indoor/outdoor options, 12V/220V, solar and app-controlled versions available.
">
<meta name="keywords" content="bamboo lighting, handmade bamboo lamp, bamboo pendant, bamboo wall light, bespoke lighting, artisanal bamboo lights, sculptural bamboo lights, interior lighting, exterior bamboo lamps, solar bamboo light, 12V bamboo light, 220V lighting
">
<meta name="author" content="BAMBU – Handmade Bambu Lighting | Sculptural Pendant, Wall & Floor Lights">
<meta name="generator" content="WYSIWYG Web Builder 20 - https://www.wysiwygwebbuilder.com">
<link href="https://luminare.design/Bambu_1.html" rel="canonical">
<link href="https://luminare.design/" hreflang="en-us" rel="alternate">
<link href="https://luminare.design/de/" hreflang="de" rel="alternate">
<link href="https://luminare.design/es/" hreflang="es" rel="alternate">
body
{
   background-color: #4F4F4F;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 16px;
   line-height: 1.1875;
   margin: 0;
   padding: 0;
}
#Layer4
{
   background-color: transparent;
   background-image: none;
   border-radius: 0px;
   padding: 0;
}
#wb_Image1
{
   vertical-align: top;
}
#Image1
{
   border: 0px solid #000000;
   border-radius: 0px;
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#wb_Text21 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text21 div
{
   text-align: left;
}
#wb_Image2
{
   vertical-align: top;
}
#Image2
{
   border: 0px solid #000000;
   border-radius: 0px;
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#wb_Image3
{
   vertical-align: top;
}
#Image3
{
   border: 0px solid #000000;
   border-radius: 0px;
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#wb_Image4
{
   vertical-align: top;
}
#Image4
{
   border: 0px solid #000000;
   border-radius: 0px;
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#wb_Text3 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text3 div
{
   text-align: left;
}
#wb_Text1 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text1 div
{
   text-align: left;
}
#wb_Text10 
{
   background-color: #4F4F4F;
   background-image: none;
   border: 0px solid #696969;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text10 div
{
   text-align: left;
}
#wb_PanelMenu1 a, #PanelMenu1_markup li a
{
   display: block;
   text-align: left;
   vertical-align: middle;
}
#PanelMenu1_markup
{
   display: none;
   margin: 0;
   padding: 0;
}
#PanelMenu1_panel #PanelMenu1_markup
{
   display: block;
}
#PanelMenu1_markup ul
{
   list-style: none;
   list-style-type: none;
   margin: 0;
   padding: 0;
}
#PanelMenu1_markup li a, #PanelMenu1_markup li a:hover, #PanelMenu1_markup li .active
{
   padding: 10px 10px 10px 10px;
   box-shadow: none;
}
#PanelMenu1_markup .divider
{
   height: 1px;
   margin: 9px 0;
   overflow: hidden;
   background-color: #2E2E2E;
}
#PanelMenu1_panel
{
   display: none;
   position: fixed;
   top: 0;
   height: 100%;
   width: 150px;
   z-index: 9999;
}
#PanelMenu1_markup li a
{
   color: #F7F7F7;
   border: 1px solid #2E2E2E;
   background-color: #696969;
   font-family: Arial;
   font-weight: normal;
   font-size: 13px;
   font-style: normal;
   text-decoration: none;
   text-transform: none;
}
#wb_PanelMenu1 a
{
   color: #F7F7F7;
   border: 1px solid #2E2E2E;
   border-radius: 0px;
   background-color: #292C33;
   font-family: Arial;
   font-weight: normal;
   font-size: 13px;
   font-style: normal;
   text-decoration: none;
   text-align: left;
   text-transform: none;
}
#PanelMenu1_markup li a:hover, #PanelMenu1_markup li .active
{
   color: #F7F7F7;
   background-color: #696969;
   border: 1px solid #2E2E2E;
}
#PanelMenu1_markup li a .icon
{
   fill: currentColor;
   margin-left: 4px;
   height: 24px;
   width: 24px;
   vertical-align: middle;
}
#PanelMenu1_markup li a:hover .icon
{
   fill: currentColor;
}
#wb_PanelMenu1 a:hover
{
   color: #F7F7F7;
   background-color: #292C33;
   border: 1px solid #2E2E2E;
}
#PanelMenu1_panel
{
   background-color: #696969;
   overflow-y: auto;
}
#PanelMenu1 .line
{
   width: 24px;
   height: 4px;
   background: #F7F7F7;
   display: block;
   margin: 4px auto;
   transition: all 0.3s ease-in-out;
}
#PanelMenu1 .line:first-child
{
   margin-top: 27px;
}
#PanelMenu1.open .line:nth-child(1)
{
   transform: translateY(8px) rotate(45deg);
}
#PanelMenu1.open .line:nth-child(2)
{
   opacity: 0;
}
#PanelMenu1.open .line:nth-child(3)
{
   transform: translateY(-8px) rotate(-45deg);
}
#PanelMenu1
{
   line-height: 79px;
   width: 102px;
   height: 79px;
   position: absolute;
   z-index: 999;
}
