Embed

<meta name="viewport" content="width=device-width, initial-scale=1" /> 


<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> 


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> 

<style>
/* Durable Header verstecken (sicherer: kein globales nav-hiding) */
header:not(#npf-main-header),
[data-durable-header],
.durable-header,
.site-header:not(#npf-main-header),
.main-header:not(#npf-main-header) {
  display: none !important;
  visibility: hidden !important;
}
/* [code:7] */

body {
  padding-top: 0 !important;
  margin-top: 0 !important;
} /* [code:7] */
</style>

<header id="npf-main-header">
  <div class="header-container">

    
    <div class="header-left">
      <a href="#" class="social-icon" title="Instagram" aria-label="Instagram">
        <i class="fab fa-instagram"></i>
      </a>
      <a href="#" class="social-icon" title="YouTube" aria-label="YouTube">
        <i class="fab fa-youtube"></i>
      </a>
      <a href="#" class="social-icon" title="TikTok" aria-label="TikTok">
        <i class="fab fa-tiktok"></i>
      </a>
    </div>

    
    <div class="header-center">
      <a href="https://npf-world.com" class="logo-link">
        <img src="https://cdn.durable.co/blocks/1fTYpi5qGvHMySGuxDOduJBid6RSicVjmyK4G0wpKC2DGM0K2XLwkjdad6K9ZsIq.png"
             alt="Noble Protection Film Logo"
             class="header-logo">
      </a>

      
      <nav class="header-nav">
        <a href="https://npf-world.com/produkte" class="nav-link">Produkte</a>
        <span class="nav-divider">|</span>
        <a href="https://npf-world.com/galerie" class="nav-link">Galerie</a>
        <span class="nav-divider">|</span>
        <a href="https://npf-world.com/ueber-uns" class="nav-link">Über Uns</a>
      </nav>
    </div>

    
    <div class="header-right">
      <div class="language-selector">
        <a href="https://npf-world.com/en/homepage" class="lang-btn">
          <span class="flag-icon">🇬🇧</span>
          <span class="lang-text">English</span>
        </a>
      </div>

      <a href="https://npf-world.com/kontakt" class="contact-btn">Kontakt</a>
    </div>
  </div>

  
  <button class="mobile-menu-toggle" id="mobile-toggle" aria-label="Menu" aria-expanded="false" aria-controls="mobile-menu">
    <span></span>
    <span></span>
    <span></span>
  </button>

  
  <div class="mobile-menu" id="mobile-menu" aria-hidden="true">

    <nav class="mobile-nav">
      <a href="https://npf-world.com/produkte" class="mobile-nav-link">Produkte</a>
      <a href="https://npf-world.com/galerie" class="mobile-nav-link">Galerie</a>
      <a href="https://npf-world.com/ueber-uns" class="mobile-nav-link">Über Uns</a>
    </nav>

    
    <a href="https://npf-world.com/kontakt" class="mobile-contact-btn">Kontakt</a>

    
    <div class="mobile-language">
      <a href="https://npf-world.com/en/homepage" class="mobile-lang-btn">
        <span class="flag-icon">🇬🇧</span> English
      </a>
    </div>

    <div class="mobile-social">
      <a href="#" class="mobile-social-icon" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
      <a href="#" class="mobile-social-icon" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
      <a href="#" class="mobile-social-icon" aria-label="TikTok"><i class="fab fa-tiktok"></i></a>
    </div>
  </div>
</header>

<style>
/* ============================================ */
/* NPF HEADER - GANZ OBEN */
/* ============================================ */

#npf-main-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  background: rgba(32, 18, 11, 0.92) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 0 !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4) !important;
  z-index: 10000000 !important;
  padding: 15px 30px !important;
  font-family: 'Libre Baskerville', serif !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.header-container {
  max-width: 1400px;
  margin: 0 auto;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}

/* LINKE SEITE - Social Media Icons */
.header-left {
  display: flex !important;
  gap: 15px;
  align-items: center;
}

.social-icon {
  color: #f4d689 !important;
  font-size: 20px;
  transition: all 0.3s ease;
  opacity: 0.85;
  text-decoration: none !important;
  display: inline-block !important;
}

.social-icon:hover {
  opacity: 1;
  transform: translateY(-2px);
  color: #fff !important;
  text-shadow: 0 0 15px rgba(244, 214, 137, 0.6);
}

/* MITTE - Logo + Navigation */
.header-center {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.logo-link {
  display: block !important;
  line-height: 0;
}

.header-logo {
  height: 70px !important;
  width: auto !important;
  display: block !important;
  transition: all 0.3s ease;
  filter: drop-shadow(0 2px 8px rgba(244, 214, 137, 0.3));
}

.header-logo:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 4px 12px rgba(244, 214, 137, 0.5));
}

.header-nav {
  display: flex !important;
  gap: 15px;
  align-items: center;
}

.nav-link {
  color: #f4d689 !important;
  text-decoration: none !important;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: all 0.3s ease;
  opacity: 0.9;
  font-weight: 400;
}

.nav-link:hover {
  opacity: 1;
  color: #fff !important;
  text-shadow: 0 0 10px rgba(244, 214, 137, 0.6);
}

.nav-divider {
  color: rgba(244, 214, 137, 0.4);
  font-size: 12px;
}

/* RECHTE SEITE - Sprache + Kontakt */
.header-right {
  display: flex !important;
  gap: 20px;
  align-items: center;
  justify-content: flex-end;
}

.language-selector {
  display: flex !important;
  align-items: center;
  gap: 8px;
}

.lang-btn {
  background: transparent !important;
  border: none !important;
  color: #f4d689 !important;
  font-family: 'Libre Baskerville', serif;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 6px;
  transition: all 0.3s ease;
  display: flex !important;
  align-items: center;
  gap: 6px;
  opacity: 0.7;
  text-decoration: none !important;
}

.lang-btn:hover {
  opacity: 1;
  background: rgba(244, 214, 137, 0.1) !important;
}

.flag-icon {
  font-size: 16px;
  line-height: 1;
}

.contact-btn {
  background: linear-gradient(135deg, #f4d689 0%, #c5974a 100%) !important;
  color: #20120b !important;
  font-family: 'Libre Baskerville', serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 10px 24px;
  border-radius: 8px;
  border: 2px solid #f4d689 !important;
  text-decoration: none !important;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(244, 214, 137, 0.3);
  white-space: nowrap;
  display: inline-block !important;
}

.contact-btn:hover {
  background: linear-gradient(135deg, #c5974a 0%, #f4d689 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(244, 214, 137, 0.5);
}

/* MOBILE MENU */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10000003;
}

.mobile-menu-toggle span {
  width: 28px;
  height: 3px;
  background: #f4d689;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.mobile-menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(7px, 7px);
}

.mobile-menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -7px);
}

.mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(32, 18, 11, 0.98);
  backdrop-filter: blur(20px);
  padding: 100px 30px 40px;
  flex-direction: column;
  gap: 28px;
  z-index: 10000002;
  overflow-y: auto;
}

.mobile-menu.active {
  display: flex !important;
  flex-direction: column !important;
}

.mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mobile-nav-link {
  display: block !important;
  color: #f4d689 !important;
  font-size: 24px;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: none !important;
  text-align: center;
  transition: all 0.3s ease;
  padding: 14px;
  border-bottom: 0 !important;
}

.mobile-nav-link:hover {
  color: #fff !important;
  background: rgba(244, 214, 137, 0.1);
}

/* Kontakt Button im Burger-Menü */
#mobile-menu .mobile-contact-btn {
  display: block !important;
  text-align: center;
  padding: 16px 18px;
  border-radius: 10px;
  text-decoration: none !important;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 18px;
  font-weight: 700;
  background: linear-gradient(135deg, #f4d689 0%, #c5974a 100%) !important;
  color: #20120b !important;
  border: 2px solid #f4d689 !important;
  box-shadow: 0 6px 20px rgba(244, 214, 137, 0.25);
}

#mobile-menu .mobile-contact-btn:hover {
  filter: brightness(1.05);
}

.mobile-language {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding-top: 20px;
  border-top: 2px solid rgba(244, 214, 137, 0.3);
}

.mobile-lang-btn {
  background: rgba(244, 214, 137, 0.1) !important;
  border: 2px solid rgba(244, 214, 137, 0.3) !important;
  color: #f4d689 !important;
  font-family: 'Libre Baskerville', serif;
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 15px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none !important;
}

.mobile-social {
  display: flex;
  gap: 30px;
  justify-content: center;
  padding-top: 10px;
}

.mobile-social-icon {
  color: #f4d689 !important;
  font-size: 32px;
  transition: all 0.3s ease;
  text-decoration: none !important;
}

.mobile-social-icon:hover {
  color: #fff !important;
  transform: scale(1.2);
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .header-container { gap: 15px; }
  .header-logo { height: 60px !important; }
  .nav-link { font-size: 12px; }
  .lang-text { display: none; }
  .lang-btn { padding: 6px; }
}

@media (max-width: 768px) {
  #npf-main-header { padding: 12px 20px !important; }

  .header-container {
    grid-template-columns: 1fr !important;
    justify-items: center;
  }

  /* Links & Rechts im Header auf Mobile ausblenden -> Kontakt ist im Burger-Menü */
  .header-left,
  .header-right {
    display: none !important;
  }

  .header-center { gap: 8px; }
  .header-logo { height: 50px !important; }
  .header-nav { gap: 10px; }
  .nav-link { font-size: 10px; letter-spacing: 1px; }
  .nav-divider { font-size: 10px; }

  .mobile-menu-toggle { display: flex !important; }
}
</style>

<script>
(function() {
  'use strict';

  document.addEventListener('DOMContentLoaded', function() {

    // Durable Header verstecken (robust: NICHT deine Elemente innerhalb von #npf-main-header)
function hideDurableHeader() {
  // 1) Alle Header ausblenden, außer unser eigener
  document.querySelectorAll('header').forEach(function(el) {
    if (el.id !== 'npf-main-header' && !el.closest('#npf-main-header')) {
      el.style.setProperty('display', 'none', 'important');
      el.style.setProperty('visibility', 'hidden', 'important');
    }
  });

  // 2) Zusätzlich bekannte Durable-Header-Container ausblenden (falls kein <header>)
  document.querySelectorAll('[data-durable-header], .durable-header, .site-header, .main-header').forEach(function(el) {
    if (!el.closest('#npf-main-header')) {
      el.style.setProperty('display', 'none', 'important');
      el.style.setProperty('visibility', 'hidden', 'important');
    }
  });

  // Unseren Header immer sichtbar halten
  const npfHeader = document.getElementById('npf-main-header');
  if (npfHeader) {
    npfHeader.style.setProperty('display', 'block', 'important');
    npfHeader.style.setProperty('visibility', 'visible', 'important');
    npfHeader.style.setProperty('opacity', '1', 'important');
  }
}


    hideDurableHeader();
    setTimeout(hideDurableHeader, 500);
    setTimeout(hideDurableHeader, 1000);

    // Mobile Menu Toggle
    const mobileToggle = document.getElementById('mobile-toggle');
    const mobileMenu = document.getElementById('mobile-menu');

    function closeMobileMenu() {
      if (!mobileToggle || !mobileMenu) return;
      mobileToggle.classList.remove('active');
      mobileMenu.classList.remove('active');
      mobileToggle.setAttribute('aria-expanded', 'false');
      mobileMenu.setAttribute('aria-hidden', 'true');
      document.body.style.overflow = '';
    }

    function openMobileMenu() {
      if (!mobileToggle || !mobileMenu) return;
      mobileToggle.classList.add('active');
      mobileMenu.classList.add('active');
      mobileToggle.setAttribute('aria-expanded', 'true');
      mobileMenu.setAttribute('aria-hidden', 'false');
      document.body.style.overflow = 'hidden';
    }

    if (mobileToggle && mobileMenu) {
      mobileToggle.addEventListener('click', function() {
        const isOpen = mobileMenu.classList.contains('active');
        if (isOpen) closeMobileMenu();
        else openMobileMenu();
      });

      // Menü schließen, wenn man auf irgendeinen Link klickt (inkl. Kontakt-Button)
      const closeLinks = mobileMenu.querySelectorAll('a');
      closeLinks.forEach(function(link) {
        link.addEventListener('click', function() {
          closeMobileMenu();
        });
      });
    }

    // Header scroll effect (nur optisch)
    window.addEventListener('scroll', function() {
      const currentScroll = window.pageYOffset;
      const header = document.getElementById('npf-main-header');
      if (header) {
        if (currentScroll > 100) {
          header.style.padding = '10px 30px';
        } else {
          header.style.padding = '15px 30px';
        }
      }
    });

  });
})();
</script>

<style>
:root {
  --gold: #f4d689;
  --dark: #20120b;
}

html { scroll-behavior: smooth; }
* { box-sizing: border-box; }

/* GESAMTER WRAPPER – alles in einer Spalte */
#npf-produkte-page {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Libre Baskerville', serif;
  background: transparent;
  padding: 60px 20px 80px;
  position: relative;
}

/* LOGO WASSERZEICHEN */
#npf-produkte-page .logo-pattern-bg {
  position: absolute;
  inset: 0;
  background-image: url('https://cdn.durable.co/blocks/1fTYpi5qGvHMySGuxDOduJBid6RSicVjmyK4G0wpKC2DGM0K2XLwkjdad6K9ZsIq.png');
  background-size: 180px 180px;
  background-repeat: repeat;
  background-position: center;
  opacity: .10;
  z-index: 0;
  pointer-events: none;
}

/* HERO TEXT */
.produkte-hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: 50px;
  width: 100%;
}

.produkte-eyebrow {
  font-family: 'Libre Baskerville', serif;
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .85;
  margin: 0 0 16px 0;
}

.produkte-title {
  font-family: 'Libre Baskerville', serif !important;
  font-size: 42px;
  font-weight: 400;
  color: #000;
  letter-spacing: 6px;
  text-transform: uppercase;
  margin: 0 0 20px 0;
  line-height: 1.15;
}

.produkte-divider {
  width: 100px;
  height: 2px;
  margin: 0 auto 22px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  box-shadow: 0 0 12px rgba(244,214,137,0.5);
}

.produkte-subtitle {
  font-family: Georgia, serif;
  font-size: 16px;
  color: #000;
  margin: 0 auto;
  line-height: 1.8;
  max-width: 600px;
  opacity: .8;
}

/* KATALOG SHELL */
#npf-shell {
  position: relative;
  z-index: 1;
  width: 35%;
}

/* VIEWPORT */
#npf-viewport {
  width: 100%;
  overflow: hidden;
  position: relative;
  border-radius: 10px 10px 0 0;
  box-shadow:
    0 40px 100px rgba(0,0,0,0.55),
    0 10px 30px rgba(0,0,0,0.3),
    0 0 0 1px rgba(244,214,137,0.15);
}

#npf-track {
  display: flex;
  transition: transform 1.1s cubic-bezier(0.77, 0, 0.175, 1);
  will-change: transform;
}

.npf-slide {
  flex-shrink: 0;
  line-height: 0;
  background: transparent;
}

.npf-slide img {
  width: 100%;
  height: 700px;
  object-fit: cover;
  display: block;
}

/* DOTS */
#npf-indicator {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
  z-index: 10;
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(244,214,137,0.35);
  transition: background 0.3s, transform 0.3s;
  cursor: pointer;
}

.dot.active {
  background: var(--gold);
  transform: scale(1.35);
  box-shadow: 0 0 8px rgba(244,214,137,0.6);
}

/* PFEILE */
.nav-btn {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1px solid rgba(244,214,137,0.3);
  outline: none;
  background: rgba(32,18,11,0.85);
  color: var(--gold);
  font-size: 42px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  box-shadow: 0 6px 24px rgba(0,0,0,0.5);
  transition: background 0.25s, transform 0.2s, opacity 0.3s, border-color 0.25s;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding-bottom: 3px;
}

.nav-btn:hover {
  background: rgba(32,18,11,0.98);
  border-color: rgba(244,214,137,0.7);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 8px 30px rgba(0,0,0,0.6), 0 0 20px rgba(244,214,137,0.2);
}

.nav-btn:active { transform: translateY(-50%) scale(0.94); }
.nav-btn.off    { opacity: 0; pointer-events: none; }

#btn-prev { left: -44px; }
#btn-next { right: -44px; }

/* FUSS */
#npf-footer {
  width: 100%;
  background: linear-gradient(180deg, rgba(32,18,11,0.97) 0%, rgba(20,10,5,1) 100%);
  padding: 22px 30px;
  text-align: center;
  border-top: 1px solid rgba(244,214,137,0.2);
  border-radius: 0 0 10px 10px;
  margin-top: -1px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

#npf-req-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 44px;
  background: transparent;
  color: var(--gold);
  border: 1px solid rgba(244,214,137,0.4);
  border-radius: 8px;
  font-family: 'Libre Baskerville', serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.35s ease;
  outline: none;
  position: relative;
  overflow: hidden;
}

#npf-req-btn:hover {
  border-color: var(--gold);
  box-shadow: 0 0 30px rgba(244,214,137,0.15);
  transform: translateY(-1px);
}

.req-arrow {
  font-size: 11px;
  opacity: 0.6;
  transition: transform 0.4s;
}
.req-arrow.flipped { transform: rotate(180deg); }

/* FORMULAR */
#npf-form-outer {
  position: relative;
  z-index: 1;
  width: 35%;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.75s cubic-bezier(0.4,0,0.2,1);
  border-radius: 0 0 10px 10px;
}

#npf-form-outer.open { max-height: 680px; }

#npf-form-box {
  background: linear-gradient(180deg, #fff 0%, #f9f7f4 100%);
  padding: 40px 36px 36px;
  border-top: 2px solid var(--dark);
}

.form-product-label {
  text-align: center;
  font-family: 'Libre Baskerville', serif;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 6px;
}

.form-product-label strong {
  display: block;
  color: var(--dark);
  font-size: 17px;
  letter-spacing: 2px;
  margin-top: 6px;
  font-style: italic;
  font-weight: 400;
}

.form-divider {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--dark), transparent);
  margin: 16px auto 20px;
  opacity: 0.25;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}

.form-col { display: flex; flex-direction: column; }
.form-col.span2 { grid-column: 1 / -1; }

.form-col label {
  font-family: 'Libre Baskerville', serif;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #aaa;
  margin-bottom: 5px;
  margin-top: 10px;
}

.form-col input, .form-col textarea {
  padding: 13px 15px;
  border: 1.5px solid #e5e1d8;
  border-radius: 7px;
  font-size: 14px;
  font-family: Georgia, serif;
  background: #fff;
  transition: border-color 0.25s, box-shadow 0.25s;
  resize: vertical;
  color: var(--dark);
}

.form-col input:focus, .form-col textarea:focus {
  outline: none;
  border-color: var(--dark);
  box-shadow: 0 0 0 3px rgba(32,18,11,0.06);
}

#form-submit {
  margin-top: 22px;
  width: 100%;
  padding: 17px;
  background: linear-gradient(135deg, var(--dark) 0%, #000 100%);
  color: var(--gold);
  border: 1px solid rgba(244,214,137,0.3);
  outline: none;
  border-radius: 8px;
  font-family: 'Libre Baskerville', serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s;
}

#form-submit:hover:not(:disabled) {
  background: linear-gradient(135deg, #2d150a 0%, #111 100%);
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

#form-submit:disabled { opacity: 0.55; cursor: not-allowed; }

/* RESPONSIVE */
@media (max-width: 1100px) {
  #npf-shell, #npf-form-outer { width: 55%; }
  .produkte-title { font-size: 32px; }
}

@media (max-width: 768px) {
  #npf-shell, #npf-form-outer { width: 92%; }
  #btn-prev { left: -26px; }
  #btn-next { right: -26px; }
  .nav-btn { width: 48px; height: 48px; font-size: 36px; }
  .produkte-title { font-size: 26px; letter-spacing: 3px; }
  .form-row { grid-template-columns: 1fr; }
  .form-col.span2 { grid-column: 1; }
  .npf-slide img { height: 480px; }
  #npf-req-btn { font-size: 10px; letter-spacing: 1.5px; padding: 14px 20px; gap: 8px; }
}
</style>



<div id="npf-produkte-page">
  <div class="logo-pattern-bg"></div>

  
  <div class="produkte-hero-content">
    <p class="produkte-eyebrow">Noble Protection Film</p>
    <h1 class="produkte-title">Unsere Produkte</h1>
    <div class="produkte-divider"></div>
    <p class="produkte-subtitle">
      Entdecken Sie unsere exklusive Kollektion an Lackschutzfolien –
      entwickelt für höchste Ansprüche, gefertigt für Perfektion.
    </p>
  </div>

  
  <div id="npf-shell">
    <div id="npf-viewport">
      <div id="npf-track"></div>
      <div id="npf-indicator"></div>
    </div>
    <button class="nav-btn" id="btn-prev">&#8249;</button>
    <button class="nav-btn" id="btn-next">&#8250;</button>
    <div id="npf-footer">
      <button id="npf-req-btn">
        <span>&#x2709;&nbsp; Produktanfrage stellen</span>
        <span class="req-arrow" id="req-arrow">&#9660;</span>
      </button>
    </div>
  </div>

  
  <div id="npf-form-outer">
    <div id="npf-form-box">
      <p class="form-product-label">
        Anfrage für
        <strong id="form-product-name">Cover</strong>
      </p>
      <div class="form-divider"></div>
      <form action="https://api.web3forms.com/submit" method="POST" id="npf-form">
        <input type="hidden" name="access_key"  value="4858f637-e8fd-484d-9039-af34dd2eedd3">
        <input type="hidden" name="from_name"   value="NPF Website – Produktanfrage">
        <input type="hidden" name="email"       value="info@npf-world.com">
        <input type="hidden" name="subject"     id="form-subject" value="">
        <input type="hidden" name="redirect"    value="https://npf-world.com/danke">
        <div class="form-row">
          <div class="form-col">
            <label>Name*</label>
            <input type="text" name="name" required>
          </div>
          <div class="form-col">
            <label>E-Mail*</label>
            <input type="email" name="customer_email" required>
          </div>
          <div class="form-col">
            <label>Telefon*</label>
            <input type="text" name="phone" required>
          </div>
          <div class="form-col span2">
            <label>Nachricht*</label>
            <textarea name="message" rows="3" required></textarea>
          </div>
        </div>
        <button type="submit" id="form-submit">Anfrage senden</button>
      </form>
    </div>
  </div>

</div>

<script>
(function(){

  const PAGES = [
    { url:"https://cdn.durable.co/blocks/26TNZTIi5BUawJ0cbR1BknBPb9sHo1o7Mo2TB17eFUm5hCNaunaE8XPDUDtMScTz.jpg", name:"Cover" },
    { url:"https://cdn.durable.co/blocks/2fmHNt5SC8p3r2tBCSF34ApauQ8mnXR6Z5mfiYJL3THl2g8uFSKeL9e5oJsKBYWH.jpg", name:"Why NPF" },
    { url:"https://cdn.durable.co/blocks/25H8AA66M33ktpYLGbKZXpoIQlgVJVkjhxsmu7h4jvJWkrXylXzKS5qYY7RdMDOd.jpg", name:"Product Features" },
    { url:"https://cdn.durable.co/blocks/3aFkVStxwJxzOzkAzkYrCLeXUwQxy97V5S1c2mYxflB9w7BwhbvAfv1HwLovDouQ.jpg", name:"Windshield Pro" },
    { url:"https://cdn.durable.co/blocks/5gshYDWbMcAZuwWGaeATUAST2ZrnNNJkeG3fHng32ajuPQX6sPkTrYpQFBUqfWIK.jpg", name:"Windshield" },
    { url:"https://cdn.durable.co/blocks/12f33CxRcnrMLybL1mBYa94jfAmfmn686cEuAtof3Mx6vc7fhFyXEvHfycHgzcrM.png", name:"Clear Pro" },
    { url:"https://cdn.durable.co/blocks/1e0oU8C2rxtj2Gq4Q0OgD3okJT6QXPdrhKoCxemIVQGC0vo6S5NJ2duu0ykYqWKc.jpg", name:"Carbon" },
    { url:"https://cdn.durable.co/blocks/29GMHTBMwcpB4QuPcmK76XNOExhXQ9AW2419EiLLrpgnGBu0fsXMj05i6IqteZ2N.jpg", name:"Jet Black" },
    { url:"https://cdn.durable.co/blocks/23EFfkPqoDwilXraJmJTMBZKA6sy3TbU6DoH3TUHCMaMjgJzxDYD01dCBbgB7K1L.jpg", name:"Clear" },
    { url:"https://cdn.durable.co/blocks/eto56Cu67LsTQRtnQFnDMvIqHCQYjqyjVzxwBlzqyX70IXjOZIv0evBIrh8JP06s.jpg", name:"Brilliant" },
    { url:"https://cdn.durable.co/blocks/2c0KjWVPsNbpHTkTMhS6Eu6AQhNfpAB4ZjAaSNBNsFx9q5rG2S3AtG1PoaWRSXX7.jpg", name:"Matte" },
    { url:"https://cdn.durable.co/blocks/edpRl6V5XN1ktnTiA0FFBNcr835trDb800y0CVRCEbuxN5dyUBN2ChE8H3zuFDYP.jpg", name:"Back Cover" }
  ];

  const N   = PAGES.length;
  const DUR = 1100;
  let cur   = 0;
  let busy  = false;

  const track       = document.getElementById('npf-track');
  const indicator   = document.getElementById('npf-indicator');
  const btnPrev     = document.getElementById('btn-prev');
  const btnNext     = document.getElementById('btn-next');
  const formSubject = document.getElementById('form-subject');
  const formProduct = document.getElementById('form-product-name');

  // Slides
  track.style.width = N * 100 + '%';
  PAGES.forEach((page, i) => {
    const slide = document.createElement('div');
    slide.className = 'npf-slide';
    slide.style.width = (100 / N) + '%';
    slide.innerHTML = `<img src="${page.url}" alt="${page.name}" loading="${i===0?'eager':'lazy'}">`;
    track.appendChild(slide);
  });

  // Dots
  PAGES.forEach((_, i) => {
    const dot = document.createElement('div');
    dot.className = 'dot' + (i===0 ? ' active' : '');
    dot.addEventListener('click', () => goTo(i));
    indicator.appendChild(dot);
  });

  function goTo(idx) {
    if (busy || idx < 0 || idx >= N) return;
    busy = true;
    cur  = idx;
    track.style.transform = `translateX(-${idx * (100/N)}%)`;
    updateInfo();
    updateArrows();
    updateDots();
    setTimeout(() => { busy = false; }, DUR + 50);
  }

  function updateInfo() {
    const name = PAGES[cur].name;
    if (formSubject) formSubject.value = 'Anfrage Produkt: ' + name;
    if (formProduct) formProduct.textContent = name;
  }

  function updateArrows() {
    btnPrev.classList.toggle('off', cur === 0);
    btnNext.classList.toggle('off', cur === N - 1);
  }

  function updateDots() {
    document.querySelectorAll('#npf-indicator .dot').forEach((d, i) => {
      d.classList.toggle('active', i === cur);
    });
  }

  btnPrev.addEventListener('click', () => goTo(cur - 1));
  btnNext.addEventListener('click', () => goTo(cur + 1));

  document.addEventListener('keydown', e => {
    if (e.key === 'ArrowLeft')  goTo(cur - 1);
    if (e.key === 'ArrowRight') goTo(cur + 1);
  });

  let tx = 0;
  const vp = document.getElementById('npf-viewport');
  vp.addEventListener('touchstart', e => { tx = e.touches[0].clientX; }, {passive:true});
  vp.addEventListener('touchend', e => {
    const dx = e.changedTouches[0].clientX - tx;
    if (dx < -50) goTo(cur + 1);
    if (dx >  50) goTo(cur - 1);
  });

  document.getElementById('npf-req-btn').addEventListener('click', () => {
    document.getElementById('npf-form-outer').classList.toggle('open');
    document.getElementById('req-arrow').classList.toggle('flipped');
  });

  document.getElementById('npf-form').addEventListener('submit', function() {
    const btn = document.getElementById('form-submit');
    btn.textContent = 'Wird gesendet…';
    btn.disabled = true;
  });

  goTo(0);

})();
</script>

<style>
/* ============================================ */
/* DURABLE FOOTER + SPACING VERSTECKEN */
/* ============================================ */
body > footer:not(#npf-footer),
[data-durable-footer],
.durable-footer,
.site-footer:not(#npf-footer),
footer[class*="footer"]:not(#npf-footer),
/* SPACING/DIVIDER ELEMENTS */
body > div[class*="spacing"],
body > div[class*="divider"],
body > section[class*="spacing"],
body > hr,
[data-block-type*="spacer"],
[data-block-type*="divider"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  top: -9999px !important;
}

/* ============================================ */
/* NPF FOOTER */
/* ============================================ */
#npf-footer {
  position: relative;
  width: 100%;
  background: rgba(32, 18, 11, 0.95);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid rgba(244, 214, 137, 0.2);
  box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.4);
  padding: 50px 30px 30px 30px;
  font-family: 'Libre Baskerville', serif;
  z-index: 999997;
  margin-top: 0 !important; /* Wichtig! */
}

.footer-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* ============================================ */
/* FOOTER TOP - LOGO + NAVIGATION */
/* ============================================ */
.footer-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(244, 214, 137, 0.2);
}

/* LINKE SEITE - Social Media */
.footer-left {
  display: flex;
  gap: 20px;
  align-items: center;
}

.footer-social-icon {
  color: #f4d689;
  font-size: 22px;
  transition: all 0.3s ease;
  opacity: 0.85;
  text-decoration: none;
}

.footer-social-icon:hover {
  opacity: 1;
  transform: translateY(-3px);
  color: #fff;
  text-shadow: 0 0 15px rgba(244, 214, 137, 0.6);
}

/* MITTE - Logo */
.footer-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.footer-logo-link {
  display: block;
  line-height: 0;
}

.footer-logo {
  height: 60px;
  width: auto;
  display: block;
  transition: all 0.3s ease;
  filter: drop-shadow(0 2px 8px rgba(244, 214, 137, 0.3));
}

.footer-logo:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 4px 12px rgba(244, 214, 137, 0.5));
}

.footer-tagline {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #f4d689;
  opacity: 0.85;
  margin: 0;
  font-style: italic;
}

/* RECHTE SEITE - Kontakt Info */
.footer-right {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  text-align: right;
}

.footer-contact-item {
  font-size: 13px;
  color: #f4d689;
  opacity: 0.9;
  letter-spacing: 1px;
  margin: 0;
}

.footer-contact-link {
  color: #f4d689;
  text-decoration: none;
  border-bottom: 1px solid rgba(244, 214, 137, 0.3);
  transition: all 0.2s ease;
  padding-bottom: 1px;
}

.footer-contact-link:hover {
  color: #fff;
  border-bottom-color: #fff;
}

/* ============================================ */
/* FOOTER MIDDLE - NAVIGATION LINKS */
/* ============================================ */
.footer-middle {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
  padding: 25px 0;
}

.footer-nav-link {
  color: #f4d689;
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: all 0.3s ease;
  opacity: 0.9;
  font-weight: 400;
  position: relative;
}

.footer-nav-link::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: #f4d689;
  transition: width 0.3s ease;
}

.footer-nav-link:hover {
  opacity: 1;
  color: #fff;
}

.footer-nav-link:hover::after {
  width: 100%;
}

.footer-nav-divider {
  color: rgba(244, 214, 137, 0.3);
  font-size: 12px;
}

/* ============================================ */
/* FOOTER BOTTOM - COPYRIGHT */
/* ============================================ */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 25px;
  border-top: 1px solid rgba(244, 214, 137, 0.15);
}

.footer-copyright {
  font-size: 11px;
  color: #f4d689;
  opacity: 0.75;
  letter-spacing: 1px;
  margin: 0;
}

.footer-credits {
  font-size: 11px;
  color: #f4d689;
  opacity: 0.75;
  letter-spacing: 1px;
  margin: 0;
}

.footer-credits-link {
  color: #f4d689;
  text-decoration: none;
  border-bottom: 1px solid rgba(244, 214, 137, 0.3);
  transition: all 0.2s ease;
}

.footer-credits-link:hover {
  color: #fff;
  border-bottom-color: #fff;
}

/* ============================================ */
/* RESPONSIVE */
/* ============================================ */
@media (max-width: 1024px) {
  .footer-top {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 30px;
  }
  
  .footer-left {
    justify-content: center;
  }
  
  .footer-right {
    align-items: center;
    text-align: center;
  }
  
  .footer-middle {
    flex-wrap: wrap;
    gap: 15px;
  }
}

@media (max-width: 768px) {
  #npf-footer {
    padding: 40px 20px 25px 20px;
  }
  
  .footer-container {
    gap: 30px;
  }
  
  .footer-top {
    padding-bottom: 30px;
    gap: 25px;
  }
  
  .footer-logo {
    height: 50px;
  }
  
  .footer-tagline {
    font-size: 10px;
  }
  
  .footer-contact-item {
    font-size: 12px;
  }
  
  .footer-middle {
    flex-direction: column;
    gap: 15px;
    padding: 20px 0;
  }
  
  .footer-nav-divider {
    display: none;
  }
  
  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .footer-social-icon {
    font-size: 20px;
  }
  
  .footer-nav-link {
    font-size: 11px;
  }
  
  .footer-copyright,
  .footer-credits {
    font-size: 10px;
  }
}
</style>

<footer id="npf-footer">
  <div class="footer-container">
    
    
    <div class="footer-top">
      
      
      <div class="footer-left">
        <a href="#" class="footer-social-icon" title="Instagram" aria-label="Instagram">
          <i class="fab fa-instagram"></i>
        </a>
        <a href="#" class="footer-social-icon" title="YouTube" aria-label="YouTube">
          <i class="fab fa-youtube"></i>
        </a>
        <a href="#" class="footer-social-icon" title="TikTok" aria-label="TikTok">
          <i class="fab fa-tiktok"></i>
        </a>
      </div>
      
      
      <div class="footer-center">
        <a href="https://npf-world.com" class="footer-logo-link">
          <img src="https://cdn.durable.co/blocks/1fTYpi5qGvHMySGuxDOduJBid6RSicVjmyK4G0wpKC2DGM0K2XLwkjdad6K9ZsIq.png" 
               alt="Noble Protection Film Logo" 
               class="footer-logo">
        </a>
        <p class="footer-tagline">Noble Protection Film</p>
      </div>
      
      
      <div class="footer-right">
        <p class="footer-contact-item">
          <a href="mailto:info@npf-world.com" class="footer-contact-link">info@npf-world.com</a>
        </p>
        <p class="footer-contact-item">+49 172 7233337</p>
        <p class="footer-contact-item">Baden-Baden, Deutschland</p>
      </div>
    </div>
    
    
    <div class="footer-middle">
      <a href="https://npf-world.com/kontakt" class="footer-nav-link">Kontakt</a>
      <span class="footer-nav-divider">|</span>
      <a href="https://npf-world.com/datenschutz" class="footer-nav-link">Datenschutz</a>
      <span class="footer-nav-divider">|</span>
      <a href="https://npf-world.com/agb" class="footer-nav-link">AGB</a>
      <span class="footer-nav-divider">|</span>
      <a href="https://npf-world.com/impressum" class="footer-nav-link">Impressum</a>
    </div>
    
    
    <div class="footer-bottom">
      <p class="footer-copyright">© 2026 Noble Protection Film GmbH. Alle Rechte vorbehalten.</p>
      <p class="footer-credits">
        Design & Entwicklung: <a href="https://www.evotize.com" target="_blank" rel="noopener noreferrer" class="footer-credits-link">Evotize</a>
      </p>
    </div>
    
  </div>
</footer>

<script>
// Durable Footer + Spacing Elements aggressiv verstecken
(function() {
  'use strict';
  
  function hideAllDurableElements() {
    // Durable Footer verstecken
    const allFooters = document.querySelectorAll('footer');
    allFooters.forEach(function(el) {
      if (el.id !== 'npf-footer') {
        el.style.display = 'none';
        el.style.visibility = 'hidden';
        el.style.height = '0';
        el.style.overflow = 'hidden';
        el.style.position = 'absolute';
        el.style.top = '-9999px';
      }
    });
    
    // Alle Spacing/Divider Elemente verstecken
    const spacingElements = document.querySelectorAll('[class*="spacing"], [class*="divider"], [data-block-type*="spacer"], [data-block-type*="divider"], hr, section[style*="background"]');
    spacingElements.forEach(function(el) {
      if (!el.closest('#npf-footer')) {
        el.style.display = 'none';
        el.style.visibility = 'hidden';
        el.style.height = '0';
        el.style.margin = '0';
        el.style.padding = '0';
      }
    });
    
    const npfFooter = document.getElementById('npf-footer');
    if (npfFooter) {
      npfFooter.style.display = 'block';
      npfFooter.style.visibility = 'visible';
      npfFooter.style.marginTop = '0';
    }
  }
  
  document.addEventListener('DOMContentLoaded', hideAllDurableElements);
  setTimeout(hideAllDurableElements, 100);
  setTimeout(hideAllDurableElements, 500);
  setTimeout(hideAllDurableElements, 1000);
  setTimeout(hideAllDurableElements, 2000);
  
  // MutationObserver
  const observer = new MutationObserver(hideAllDurableElements);
  observer.observe(document.body, {
    childList: true,
    subtree: true
  });
})();
</script>

Noble Protection Film


Create a modern, luxurious and clean B2B website in English for the company **Noble Protection Film GmbH**.  
The brand sells high-end **automotive protection films** for premium vehicles, focusing on **professional installers and wrap shops** as B2B clients.[1][2]

### General design & branding

- Overall look: **luxurious, clean, high-end automotive style**.  
- Background: **light/bright** (white or very light grey).  
- Brand colors: **turquoise, blue and black** as the main accent colors.  
- Typography: modern, minimal, easy to read, with a premium look.  
- Use high-quality images of luxury cars, detailing and film application (no cheesy stock images if possible).[3][4]
- Logo text: **Noble Protection Film** (use space in the header for a logo upload).  

### Company information

- Company name: **Noble Protection Film GmbH**.  
- Address: **Im Rollfeld 38, 76532 Baden-Baden, Germany**.  
- Email: **info@npf-world.com**.  
- Business model: B2B supplier of premium automotive paint protection films and windshield protection films for professional installers, wrap shops, detailing studios and high-end automotive businesses.[1][5]

***

## Pages & structure

Create the following pages:

1. **Home**  
2. **Products**  
3. **Contact**  
4. **Terms & Conditions**  
5. **Privacy Policy**  
6. **Imprint / Legal Notice**

***

### 1. Home page

Goal: Present Noble Protection Film as a premium, trustworthy B2B partner for high-performance automotive protection films and generate **“Send Inquiry”** leads.

Sections:

- **Hero section**  
  - Large, clean hero with luxury car imagery.  
  - Headline example:  
    - “Premium Automotive Protection Films for Professional Installers”  
  - Subheadline example:  
    - “Noble Protection Film supplies high-performance paint protection and windshield films designed for luxury vehicles and demanding B2B clients.”[1]
  - Main CTA button: **“Send Inquiry”** (scrolls to a short inquiry form or link to Contact page).  
  - Secondary CTA: **“View Products”** (links to Products page).

- **About / Why Noble**  
  - 2–3 short paragraphs explaining that Noble Protection Film focuses on:  
    - High clarity, durability and premium surface finish.  
    - Reliable B2B partnership, consistent quality and fast support.  
    - Films specifically developed for modern luxury vehicles.  
  - Tone: modern, sales-oriented, but still professional and B2B-focused.[5][4]

- **Product highlights**  
  - Short teaser cards for the main product lines with “Learn more” links to the Products page:  
    - Clear  
    - Clear Pro  
    - Windshield  
    - Windshield Pro  
    - Carbon  
    - Jet Black  
    - Brilliant  

- **Benefits for installers**  
  - Bullet points targeted specifically at wrap shops and PPF installers, e.g.:  
    - Easy, predictable installation and conformability.  
    - Reliable supply and consistent quality.  
    - Films designed for high-value vehicles and demanding customers.[3]
  - Include a small CTA block “Become a Noble Protection Film partner – Send Inquiry”.

- **Call-to-action section**  
  - A clean block with a headline like:  
    - “Ready to elevate your protection film offering?”  
  - CTA button: **“Send Inquiry”** (link to Contact).

***

### 2. Products page

Goal: Present all film types clearly and sales-oriented for B2B customers.

Create a structured **Products** page with separate sections for each film:

General intro:  
- Short paragraph introducing that Noble Protection Film offers a complete portfolio of paint protection and windshield films for high-end vehicles and professional installation.[1][5]

Then create a similar block for each product:

1. **Clear**  
   - Describe as a **high-quality transparent paint protection film** for standard high-end applications.  
   - Emphasize clarity, gloss and reliable protection against stone chips, scratches and environmental impacts.[3][4]

2. **Clear Pro**  
   - Position as a **premium-grade PPF** with enhanced durability, gloss and possibly self-healing properties (describe as advanced, high-performance version of Clear).[3]
   - Suggest ideal for top-tier luxury and sports cars.

3. **Windshield**  
   - Describe as a **transparent windshield protection film** to protect against impacts, pitting and damage from road debris.[5][2]
   - Emphasize optical clarity and suitability for professional installation.

4. **Windshield Pro**  
   - Position as the **high-end, professional version** with even stronger resistance and longevity, aimed at demanding customers and fleets.

5. **Carbon**  
   - Describe as a **stylish carbon-look protection film** for visual enhancement and surface protection.  
   - Mention use on mirrors, trims, accents and exterior details.

6. **Jet Black**  
   - Describe as a **deep black film** for a bold, dark look and protection.  
   - Ideal for sporty vehicles, exterior accents or specific body parts.

7. **Brilliant**  
   - Position as a **high-gloss, show-car grade film** that maximizes shine and visual impact.  
   - Emphasize premium appearance for luxury and show vehicles.

For each product section, include:

- Short description (2–3 sentences).  
- Key benefits in bullet points (e.g. protection, appearance, application type).  
- A small CTA: **“Send Inquiry for [Product Name]”** linking to Contact.

***

### 3. Contact page

Goal: Make it very easy for B2B clients to get in touch and send project or partnership inquiries.

- Short intro text addressing professional installers, wrap shops, dealerships and B2B partners.  
- Include company details:  
  - **Noble Protection Film GmbH**  
  - **Im Rollfeld 38, 76532 Baden-Baden, Germany**  
  - **Email: info@npf-world.com**  
- Add a **contact form** with fields:  
  - Company name  
  - Contact person  
  - Email  
  - Phone (optional)  
  - Country  
  - Type of business (dropdown: Installer / Wrap shop / Detailing studio / Car dealer / Other)  
  - Message / project details  
- Main button text: **“Send Inquiry”**.

***

### 4. Terms & Conditions page

Create a standard **B2B Terms & Conditions** style page in English, suitable for a German GmbH selling to business customers only.[4]

- Clarify that Noble Protection Film sells exclusively to commercial customers (no direct consumer sales).  
- Include typical sections like:  
  - Scope of application  
  - Offers and orders  
  - Prices and payment terms  
  - Delivery and transfer of risk  
  - Warranty and liability (for film performance, installation responsibility stays with the installer)  
  - Retention of title  
  - Place of jurisdiction and applicable law (Germany)  

(Use generic but professional legal language; the user will later have a lawyer review and adapt.)

***

### 5. Privacy Policy page

Create a **Privacy Policy** in English aligned with **GDPR principles**, structured and easy to read.[6]

- Mention that the website is operated by:  
  - **Noble Protection Film GmbH, Im Rollfeld 38, 76532 Baden-Baden, Germany, info@npf-world.com**.  
- Cover topics such as:  
  - Types of data collected (contact form, server logs, possibly analytics and cookies).  
  - Purpose of data processing (handling inquiries, improving the website, fulfilling B2B relationships).  
  - Legal basis (legitimate interest, contract initiation, consent where required).  
  - Data sharing with service providers (hosting, email provider).  
  - Storage duration.  
  - Rights of data subjects under GDPR.  
  - Contact for data protection requests.  

(Write in standard GDPR-compliant website style; the user will adjust details later.)

***

### 6. Imprint / Legal Notice page

Create a German-style **Imprint / Legal Notice** page but in English.

Include at least:

- Company name: **Noble Protection Film GmbH**  
- Address: **Im Rollfeld 38, 76532 Baden-Baden, Germany**  
- Email: **info@npf-world.com**  
- Managing director placeholder (leave a generic “Managing Director: [Name]” field that can be edited).  
- Register court and registration number placeholders (e.g. “Commercial Register: [Court], Registration No.: [Number]”).  
- VAT ID placeholder.  
- Optional disclaimer text about external links and content responsibility.

***

### Final notes for the AI builder

- Keep the **tone modern, sales-oriented and premium**, but clearly B2B.  
- Focus copy on **benefits for professional installers and partners**, not end consumers.  
- Ensure all main pages are accessible from the top navigation.  
- Use **“Send Inquiry”** consistently as the primary CTA across Home, Products and Contact.  
- Apply the color palette (turquoise, blue, black) mainly for accents, buttons and headlines on a light background for a clean, luxurious look.
