<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Giant 3D Factory - Professioneller 3D-Druck & Design-Services</title>

  <!-- Klaro 0.7.22 – CSS -->
  <link rel="stylesheet"
        href="/link/klaro@0.7.22/dist/klaro.min.css" />

  <!-- deine Konfiguration -->
  <script defer src="/klaro/klaro-config.js"></script>

  <!-- Klaro 0.7.22 – JS  (wichtiger Punkt:  data-config, nicht data-klaro-config) -->
  <script defer
          src="/link/klaro@0.7.22/dist/klaro.js"
          data-config="klaroConfig"></script>
          
  <script>
    window.__SIGNATURE_SECRET__ =
      "8ce71fa60746640d1e870446274d380cda6edad263dc41965b779c8e041a10de";
  </script>

  <link href="/link/css2?
    family=Montserrat:wght@400;500;700&
    family=Orbitron:wght@400;500;700&display=swap"
    rel="stylesheet">

  <!-- Three.js Import Map für ES6 Module Support -->
  <script type="importmap">
    {
      "imports": {
        "three": "https://unpkg.com/three@0.172.0/build/three.module.js",
        "three/addons/": "/link/three@0.172.0/examples/jsm/"
      }
    }
  </script>
  <script type="importmap">
  {
    "imports": {
      "three": "/link/three@0.172.0/build/three.module.js",
      "three/addons/": "/link/three@0.172.0/examples/jsm/"
    }
  }
  </script>

  <!-- Flatpickr (Date-Picker) -->
  <link rel="stylesheet"
        href="/link/flatpickr/dist/flatpickr.min.css" />
  <script defer
          src="/link/flatpickr/dist/flatpickr.min.js"></script>

  <!-- Font Awesome 6 -->
  <link rel="stylesheet"
        href="/link/all.min.css"
        crossorigin="anonymous" referrerpolicy="no-referrer" />

  <!-- MODERNE CSS-ARCHITEKTUR v2.0 - Ersetzt desktop.css, mobile.css, tablet.css -->
  <link rel="stylesheet" href="/css/g3df-modern.css">
  
  <!-- CONTENT-WINDOW STORE - Mobile-First Responsive Design System -->
  <link rel="stylesheet" href="/css/content-window-store.css">
  
  <!-- STORE SLIDER - Professioneller Produktbild-Slider mit Thumbnail-Navigation -->
  <link rel="stylesheet" href="/css/store-slider.css">
  
  <!-- 3D CALCULATOR MODERN - Elegantes Schwarz-Weiß Design für 3D-Upload & Preisberechnung -->
  <link rel="stylesheet" href="/css/3d-calculator-modern.css">
  
  <!-- PROFESSIONELLER WARENKORB - Seriöses Schwarz-Weiß-Grau Design -->
  <link rel="stylesheet" href="/css/cart-professional.css">
  
  <!-- MODERNE UNTERSEITEN - Einheitliches Layout für alle Footer-verlinkten Seiten -->
  <link rel="stylesheet" href="/css/modern-subpages.css">
  
  <!-- MODERNE FORMULARE - CSS-Klassen für Login, Register, Profil & Formulare -->
  <link rel="stylesheet" href="/css/modern-forms.css">
  
  <!-- BACKUP - Responsive Fix CSS (wird als Fallback beibehalten) -->
  <!-- <link rel="stylesheet" href="/css/responsive-fix.css"> -->

  <!-- Viewport Height Fix für Mobile Safari/Chrome Kompatibilität -->
  <script defer src="/js/viewport-fix.js"></script>
  
  <!-- Store Performance Optimizations - Lazy Loading & Intersection Observer -->
  <script defer src="/js/store-performance.js"></script>
  
  <!-- SLIDER DEBUG SUITE - Temporär für Diagnose -->
  <script defer src="/js/slider-debug.js"></script>
  
  <!-- STORE SLIDER - Professioneller Produktbild-Slider JavaScript -->
  <script defer type="module" src="/js/store-slider.js"></script>

  <!-- 🎬 SIMPLE SCROLL REVEAL - Einfache Scroll-Einblendung -->
  <script defer src="/js/simple-scroll-reveal.js"></script>

  <!-- 📱 MOBILE SCROLL REVEAL FIX - Mobile-optimierte Animationen -->
  <script defer src="/js/mobile-scroll-reveal-fix.js"></script>

  <!-- 📱 MOBILE SCROLL ANIMATIONS CSS - Responsive Animation Styles -->
  <link rel="stylesheet" href="/css/mobile-scroll-animations.css">

  <!-- ✨ MODERN GLASSMORPHISM COMPONENTS - Premium UI Components -->
  <link rel="stylesheet" href="/css/modern-glassmorphism-components.css">

  <!-- 🛒 CART SESSION FIX - Robuste Warenkorb-Session-Verwaltung -->
  <script defer src="/js/cart-session-fix.js"></script>

  <!-- 🛒 CART EVENT HANDLER - Instanzübergreifende Warenkorb-Synchronisation -->
  <script defer src="/js/cart-event-handler.js"></script>

  <!-- init-fetch.js  (Signatur-Wrapper) -->
  <script defer type="module" src="/init-fetch.js"></script>
</head>
<body>
  <!-- VIEWPORT CONTAINER - Responsive Außenbox für alle Inhalte -->
  <div class="viewport-container">
  <div class="info-bar">
    <div class="info-bar-content">
      <!-- Nur ein Container für alle Elemente, die wir dann zentrieren oder anders anordnen -->
      <a href="https://www.youtube.com/channel/UCTpyq_91aLbFRoeqdxKICZQ" target="_blank" title="YouTube" class="social-icon"><i class="fab fa-youtube"></i></a>
      <a href="https://www.instagram.com/giant3dfactory/" target="_blank" title="Instagram" class="social-icon"><i class="fab fa-instagram"></i></a>
      <a href="https://www.tiktok.com/@giant.3d.factory?_t=ZN-8wqvOQNp8ac&_r=1" target="_blank" title="TikTok" class="social-icon"><i class="fab fa-tiktok"></i></a>
      <a href="https://wa.me/+4915773726289" target="_blank" title="Whatsapp" class="social-icon"><i class="fab fa-whatsapp"></i></a>

      <!-- Optionale zusätzliche Links, falls doch benötigt -->
      <!--
      <a href="#" data-content="kontakt" class="info-bar-link">KONTAKT</a>
      <a href="#" data-content="lernvideos" class="info-bar-link">LERNVIDEOS</a>
      -->
    </div>
  </div>
  <header class="header">
    
    
    <div class="header-case">
      
      <!-- MOBILE: 2-REIHEN LAYOUT | DESKTOP: 3-SPALTEN LAYOUT -->
      
      <!-- REIHE 1 (MOBILE) / SPALTE 1 (DESKTOP): LOGO -->
      <div class="logo-container header-box">
        <a href="/" data-content="home">
          <img src="/publicMedia/images/giant-3d-factory_logo_white.svg" alt="G3DF Logo" />
        </a>
      </div>
      
      <!-- REIHE 2 (MOBILE) / SPALTE 2 (DESKTOP): NAVIGATION -->
      <div class="navigation-box">
        <nav class="nav-l2">
          <div class="nav-item header-box"><a href="#" data-content="produkte"> Store</a></div>
          <!--<div class="nav-item header-box"><a href="#" data-content="trend">Aktuell</a></div>-->
          <div class="nav-item header-box"><a href="#" data-content="3ddrucken">3D-Drucken</a></div>
          <div class="nav-item header-box"><a href="#" data-content="design-beauftragen">Designen</a></div>
          <div class="nav-item header-box"><a href="#" data-content="skills">Service</a></div>
        </nav>
      </div>
      
      <!-- REIHE 1 (MOBILE) / SPALTE 3 (DESKTOP): ACTION-BAR -->
      <div class="action-bar">
        <div class="nav-l1 header-box">
          <!-- Suchfeld mit konsistenter Höhe -->
          <div class="nav-item suchfeld">
            <input type="text" id="searchTerm" placeholder="..." />
            <!-- ID HINZUGEFÜGT -->
            <button class="btn-small" id="searchBtn" data-content="produkte">
              <img src="/publicMedia/images/suche.svg" alt="G3DF Logo" />
            </button>
          </div>
        </div>
        <div class="nav-l1 header-box">
          <a href="#" class="btn-small" data-content="warenkorb"> <img src="/publicMedia/images/einkauf.svg" alt="G3DF Logo" /></a>
        </div>
        <div class="user-dropdown">
          <a href="#" class="btn-small user-dropdown-link" data-content="benutzer"> <img src="/publicMedia/images/person.svg" alt="G3DF Logo" /></a>
          <ul class="dropdown-content">
            <li><a href="#" data-content="profil" id="profilLink" style="display: none;">Mein Profil</a></li>
          <li><a href="#" data-content="meine-bestellungen"  style="display: none;" id="ordersLink">Meine Bestellungen</a></li>
           <li><a href="#" data-content="login" id="loginLink">Login</a></li>
          <li><a href="#" data-content="register" id="registerLink">Registrieren</a></li>
          <li><a href="#" id="logoutLink" style="display: none;">Logout</a></li>
        </ul>
      </div>
      </div>
      
    </div>
  </header>
  
  

  <div class="scrollable-container">
    <!-- Hauptbereich für dynamische Inhalte -->
    <main class="content-window" id="contentWindow">
      <h2>Willkommen!</h2>
      <p>Nutze die Navigation, um mehr über unsere Angebote zu erfahren.</p>
    </main>

    <!-- Footer -->
    <footer class="footer">
      <div class="footer-container">
        <div class="footer-column">
          <h3>Über uns</h3>
          <ul>
            <li><a href="#" data-content="kontakt">Kontakt</a></li>
            <li><a href="#" data-content="impressum">Impressum</a></li>
            <li><a href="#" data-content="agb">AGB</a></li>
            <li><a href="#" data-content="mehr-ueber-gaint">Über 3D-Factory</a></li>
          </ul>
        </div>
        <div class="footer-column">
          <h3>3D Druck</h3>
          <ul>
            <li><a href="#" data-content="fdm">FDM</a></li>
            <li><a href="#" data-content="resin">Resin</a></li>
            <li><a href="#" data-content="filament">Filamente</a></li>
            <li><a href="#" data-content="ideen">Ideen entwickeln</a></li>
          </ul>
        </div>
        <div class="footer-column">
          <h3>Zahlungsarten</h3>
          <ul>
            <li><a href="#" data-content="zahlungsarten">Kreditkarte</a></li>
            <li><a href="#" data-content="zahlungsarten">PayPal</a></li>
            
          </ul>
        </div>
        <div class="footer-column">
          <h3>Lieferung & Service</h3>
          <ul>
            <li><a href="#" data-content="lieferung-verfolgen">Lieferung verfolgen</a></li>
            <li><a href="#" data-content="rueckgabe-ersatz">Rückgabeservice</a></li>
            <li><a href="#" data-content="kundenservice">Kundenservice</a></li>
            <li><a href="#" data-content="produktinfos">Produktinfos</a></li>
          </ul>
        </div>
      </div>
      
    </footer>
  </div>

  </div> <!-- Ende viewport-container -->

  <!-- Mobile Viewport Height Fix -->
  <script>
    // Mobile Viewport Height Fix für Android Chrome
    function setViewportHeight() {
      let vh = window.innerHeight * 0.01;
      document.documentElement.style.setProperty('--vh', `${vh}px`);
    }
    
    // Initial setzen
    setViewportHeight();
    
    // Bei Resize aktualisieren (Adressleiste ein-/ausblenden)
    window.addEventListener('resize', setViewportHeight);
    window.addEventListener('orientationchange', setViewportHeight);
  </script>

  <!-- Eigenes Script -->
  <script type="module" src="script.js"></script>

  
</body>
</html>
