.elementor-27402 .elementor-element.elementor-element-292b64f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget .tippy-tooltip .tippy-content{text-align:center;}/* Start custom CSS for container, class: .elementor-element-292b64f */<!-- Fullwidth Header -->
<section class="lumina-hero" style="width:100%; background: linear-gradient(to right, #1f2937, #4b5563); color: #fff; padding: 100px 20px; text-align: center;">
  <h1 style="font-size: 3em; margin-bottom: 20px;">🎉 5 Jahre Lumina Badausstellungen</h1>
  <p style="font-size: 1.5em;">Ein halbes Jahrzehnt voller Innovation, Stil und Badträume zum Anfassen</p>
  <a href="#timeline" class="elementor-button-link" style="display: inline-block; margin-top: 30px; padding: 15px 30px; background: #f59e0b; color: #fff; font-weight: bold; border-radius: 5px; text-decoration: none;">Jetzt entdecken</a>
</section>

<!-- Zeitleiste -->
<section id="timeline" style="padding: 80px 20px; background: #f9fafb;">
  <h2 style="text-align: center; font-size: 2.5em; margin-bottom: 60px;">Unsere Reise seit 2019</h2>
  <div class="timeline">
    <div class="timeline-item">
      <div class="year">2019</div>
      <div class="content">✨ Eröffnung der ersten Lumina Badausstellung – ein Ort für Inspiration und Designvielfalt.</div>
    </div>
    <div class="timeline-item">
      <div class="year">2020</div>
      <div class="content">💡 Integration von Smart Home-Lösungen ins Baddesign.</div>
    </div>
    <div class="timeline-item">
      <div class="year">2022</div>
      <div class="content">🏆 Auszeichnung: „Bad-Ausstellung des Jahres“.</div>
    </div>
    <div class="timeline-item">
      <div class="year">2024</div>
      <div class="content">🌿 Fokus auf nachhaltige Materialien und CO₂-neutrale Showrooms.</div>
    </div>
  </div>
</section>

<!-- Metamorphose Bereich -->
<section style="padding: 80px 20px; background: #fff;">
  <h2 style="text-align: center; font-size: 2.5em; margin-bottom: 40px;">Die Metamorphose unserer Ausstellungen</h2>
  <div class="metamorphose-gallery" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px;">
    <div class="gallery-item">
      <img src="https://via.placeholder.com/400x250?text=2019" alt="2019 Ausstellung" style="width:100%; border-radius: 8px;">
      <p style="text-align:center; margin-top:10px;">Erste Konzepte</p>
    </div>
    <div class="gallery-item">
      <img src="https://via.placeholder.com/400x250?text=2021" alt="2021 Ausstellung" style="width:100%; border-radius: 8px;">
      <p style="text-align:center; margin-top:10px;">Erweiterung & Technik</p>
    </div>
    <div class="gallery-item">
      <img src="https://via.placeholder.com/400x250?text=Heute" alt="Heute" style="width:100%; border-radius: 8px;">
      <p style="text-align:center; margin-top:10px;">High-End Design 2024</p>
    </div>
  </div>
</section>

<!-- CTA Abschluss -->
<section style="padding: 80px 20px; background: #e5e7eb; text-align: center;">
  <h2 style="font-size: 2.5em;">Bereit für deine Bad-Reise?</h2>
  <p style="font-size: 1.2em; margin-bottom: 30px;">Vereinbare jetzt einen Besuch in unserer Ausstellung – wir freuen uns auf dich!</p>
  <a href="/kontakt" class="elementor-button-link" style="display: inline-block; padding: 15px 30px; background: #10b981; color: #fff; font-weight: bold; border-radius: 5px; text-decoration: none;">Termin vereinbaren</a>
</section>/* End custom CSS */