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>

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

<style>
/* =========================
   VARS / BASICS
========================= */
:root {
  --desktopHeaderOffset: 137px;
  --mobileHeaderOffset: 100px;
  --topBarHeight: 18vh;
  
  --primaryDark: #20120b;
  --primaryGold: #f4d689;
  --secondaryGold: #c5974a;
}

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

/* =========================
   TOP BAR (IMPRESSUM)
========================= */
.impressum-top-bar {
  position: fixed;
  top: var(--desktopHeaderOffset) !important;
  left: 0;
  width: 100%;
  height: var(--topBarHeight);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  background: rgba(32, 18, 11, 0.95);
  backdrop-filter: blur(15px) saturate(180%);
  -webkit-backdrop-filter: blur(15px) saturate(180%);
  z-index: 999998 !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

.impressum-top-inner {
  text-align: center;
  font-family: 'Libre Baskerville', serif;
  max-width: 1000px;
  width: 100%;
}

.impressum-top-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.impressum-top-title {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #f4d689;
  line-height: 1.2;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

.impressum-top-subtitle {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #f4d689;
  opacity: 0.95;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.6);
}

.impressum-top-divider {
  width: 120px;
  height: 2px;
  margin: 12px auto;
  background: linear-gradient(90deg, transparent, #f4d689, transparent);
  box-shadow: 0 0 12px rgba(244, 214, 137, 0.6);
}

.impressum-top-claim {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #f4d689;
  font-style: italic;
  opacity: 0.85;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.6);
}

/* =========================
   IMPRESSUM WRAPPER
========================= */
.impressum-wrapper {
  font-family: 'Libre Baskerville', serif !important;
  padding-top: calc(var(--topBarHeight) + var(--desktopHeaderOffset) + 60px);
  padding-bottom: 80px;
  background: transparent;
  position: relative;
}

/* Logo Pattern Background */
.impressum-wrapper::before {
  content: '';
  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: 0.03;
  z-index: 0;
  pointer-events: none;
}

/* =========================
   IMPRESSUM HEADER
========================= */
.impressum-header {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 40px 20px 50px;
  max-width: 1100px;
  margin: 0 auto;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}

.impressum-main-title {
  font-family: 'Libre Baskerville', serif !important;
  font-size: 42px;
  font-weight: 700;
  color: #000;
  letter-spacing: 6px;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.1;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* =========================
   IMPRESSUM CONTENT
========================= */
.impressum-content {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

.impressum-section {
  margin: 50px 0;
  padding: 40px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.5) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.impressum-section:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

/* =========================
   HEADINGS
========================= */
.impressum-heading {
  font-family: 'Libre Baskerville', serif !important;
  font-size: 28px;
  font-weight: 700;
  color: var(--primaryDark);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin: 0 0 25px 0;
  line-height: 1.3;
  padding-bottom: 15px;
  border-bottom: 2px solid rgba(244, 214, 137, 0.4);
}

/* =========================
   TEXT & PARAGRAPHS
========================= */
.impressum-text {
  font-family: Georgia, serif;
  font-size: 17px;
  color: rgba(0, 0, 0, 0.85);
  line-height: 1.8;
  margin: 0 0 15px 0;
  text-align: left;
}

.impressum-text:last-child {
  margin-bottom: 0;
}

.impressum-company-name {
  font-family: 'Libre Baskerville', serif !important;
  font-size: 22px;
  font-weight: 700;
  color: var(--primaryDark);
  letter-spacing: 2px;
  margin: 0 0 15px 0;
}

/* =========================
   CONTACT BOXES
========================= */
.impressum-contact-box {
  background: linear-gradient(135deg, rgba(32, 18, 11, 0.85) 0%, rgba(32, 18, 11, 0.75) 100%);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 2px solid rgba(244, 214, 137, 0.3);
  padding: 30px;
  border-radius: 12px;
  margin: 0 0 25px 0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(244, 214, 137, 0.2);
  transition: all 0.3s ease;
}

.impressum-contact-box:hover {
  border-color: #f4d689;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 25px rgba(244, 214, 137, 0.25);
  transform: translateY(-2px);
}

.impressum-contact-box:last-child {
  margin-bottom: 0;
}

.impressum-contact-box .impressum-text,
.impressum-contact-box .impressum-company-name {
  color: #f4d689;
  font-size: 15px;
  margin: 8px 0;
  line-height: 1.6;
}

.impressum-contact-box .impressum-company-name {
  font-size: 17px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.impressum-contact-box strong {
  font-size: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #f4d689;
}

.impressum-contact-box a {
  color: #f4d689;
  text-decoration: none;
  border-bottom: 1px solid rgba(244, 214, 137, 0.4);
  transition: all 0.2s ease;
}

.impressum-contact-box a:hover {
  color: #fff;
  border-bottom-color: #fff;
}

/* =========================
   LISTS
========================= */
.impressum-list {
  font-family: Georgia, serif;
  font-size: 17px;
  color: rgba(0, 0, 0, 0.85);
  line-height: 1.8;
  margin: 20px 0;
  padding-left: 30px;
}

.impressum-list li {
  margin-bottom: 10px;
  position: relative;
}

.impressum-list li::marker {
  color: var(--primaryGold);
  font-weight: bold;
}

/* =========================
   LINKS (außerhalb Contact Box)
========================= */
.impressum-text a {
  color: #000;
  text-decoration: none;
  border-bottom: 2px solid rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
}

.impressum-text a:hover {
  color: var(--primaryDark);
  border-bottom-color: var(--primaryGold);
}

/* =========================
   STRONG TEXT
========================= */
.impressum-text strong {
  font-weight: 700;
  color: var(--primaryDark);
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 768px) {
  .impressum-top-bar {
    top: var(--mobileHeaderOffset) !important;
    height: auto !important;
    padding: 18px 14px 22px;
  }

  .impressum-top-title {
    font-size: 22px;
    letter-spacing: 3px;
  }

  .impressum-top-subtitle {
    font-size: 12px;
    letter-spacing: 2px;
  }

  .impressum-top-divider {
    width: 100px;
    margin: 10px auto;
  }

  .impressum-top-claim {
    font-size: 11px;
  }

  .impressum-wrapper {
    padding-top: calc(var(--mobileHeaderOffset) + 120px);
    padding-bottom: 60px;
  }

  .impressum-header {
    padding: 30px 20px 40px;
  }

  .impressum-main-title {
    font-size: 32px;
    letter-spacing: 4px;
  }

  .impressum-content {
    padding: 0 15px;
  }

  .impressum-section {
    margin: 30px 0;
    padding: 25px 20px;
  }

  .impressum-heading {
    font-size: 22px;
    letter-spacing: 2px;
    margin-bottom: 20px;
  }

  .impressum-text {
    font-size: 16px;
    line-height: 1.7;
  }

  .impressum-company-name {
    font-size: 20px;
  }

  .impressum-contact-box {
    padding: 20px;
  }

  .impressum-contact-box .impressum-text {
    font-size: 14px;
  }

  .impressum-list {
    font-size: 16px;
    padding-left: 25px;
  }
}

@media (max-width: 480px) {
  .impressum-main-title {
    font-size: 26px;
    letter-spacing: 3px;
  }

  .impressum-heading {
    font-size: 20px;
  }

  .impressum-section {
    padding: 20px 15px;
  }
}
</style>


<div class="impressum-top-bar">
  <div class="impressum-top-inner">
    <div class="impressum-top-row">
      <h1 class="impressum-top-title">Noble Protection Film</h1>
      <p class="impressum-top-subtitle">Rechtliche Informationen</p>
    </div>
    
    <div class="impressum-top-divider"></div>
    
    <p class="impressum-top-claim">Transparenz & Vertrauen</p>
  </div>
</div>


<div class="impressum-wrapper">

  <div class="impressum-header">
    <h1 class="impressum-main-title">Impressum</h1>
  </div>

  <div class="impressum-content">

    
    <div class="impressum-section">
      <h2 class="impressum-heading">Angaben gemäß § 5 TMG</h2>
      <div class="impressum-contact-box">
        <p class="impressum-company-name"><strong>Noble Protection Film GmbH</strong></p>
        <p class="impressum-text">Im Rollfeld 38</p>
        <p class="impressum-text">76532 Baden-Baden</p>
        <p class="impressum-text">Deutschland</p>
      </div>
      
      <div class="impressum-contact-box">
        <p class="impressum-text"><strong>Geschäftsführung</strong></p>
        <p class="impressum-text">Frau Natalie De La Peña Jiménez</p>
        
        <p class="impressum-text"><strong>E-Mail:</strong> <a href="mailto:info@npf-world.com">info@npf-world.com</a></p>
        <p class="impressum-text"><strong>Telefon:</strong></p>
        <p class="impressum-text">+49 172 7233337</p>
        <p class="impressum-text">+49 162 7233337</p>
        <p class="impressum-text"><strong>Website:</strong> <a href="https://www.npf-world.com">www.npf-world.com</a></p>
      </div>
      
      <div class="impressum-contact-box">
        <p class="impressum-text"><strong>Handelsregister:</strong> HRB-750702 </p>
        <p class="impressum-text"><strong>Registergericht:</strong> Amtsgericht Mannheim</p>
        <p class="impressum-text"><strong>USt-IdNr.:</strong> DE-367489865 </p>
      </div>
    </div>

    
    <div class="impressum-section">
      <h2 class="impressum-heading">Kontaktformular</h2>
      <p class="impressum-text">
        Bei Nutzung unseres Kontaktformulars erheben wir folgende Daten:
      </p>
      <ul class="impressum-list">
        <li>Name</li>
        <li>E-Mail-Adresse</li>
        <li>Telefonnummer</li>
        <li>Nachrichteninhalt</li>
      </ul>
      <p class="impressum-text">
        Diese Daten werden ausschließlich zur Beantwortung Ihrer Anfrage verarbeitet und nur für die hierfür erforderliche Dauer gespeichert.
      </p>
    </div>

    
    <div class="impressum-section">
      <h2 class="impressum-heading">Verantwortlich für den Inhalt</h2>
      <p class="impressum-text">
        <strong>Inhalt:</strong> Noble Protection Film GmbH<br>
        Im Rollfeld 38, 76532 Baden-Baden, Deutschland
      </p>
      <p class="impressum-text">
        <strong>Design & Entwicklung:</strong> <a href="https://www.evotize.com" target="_blank" rel="noopener noreferrer">Evotize</a>
      </p>
      <p class="impressum-text">
        <strong>Domain:</strong> GoDaddy
      </p>
    </div>

    
    <div class="impressum-section">
      <h2 class="impressum-heading">Haftungsausschluss</h2>
      <p class="impressum-text">
        Trotz sorgfältiger inhaltlicher Kontrolle übernehmen wir keine Haftung für die Inhalte externer Links. Für den Inhalt der verlinkten Seiten sind ausschließlich deren Betreiber verantwortlich.
      </p>
    </div>

    
    <div class="impressum-section">
      <h2 class="impressum-heading">Urheberrecht</h2>
      <p class="impressum-text">
        Alle Rechte vorbehalten. Texte, Bilder, Grafiken, Ton, Animationen, Videos sowie deren Anordnung auf der Website der Noble Protection Film GmbH unterliegen dem Schutz des Urheberrechts und anderer Schutzgesetze. Der Inhalt dieser Website darf nicht zu kommerziellen Zwecken kopiert, verbreitet, verändert oder Dritten ohne schriftliche Genehmigung zugänglich gemacht werden.
      </p>
    </div>

    
    <div class="impressum-section">
      <h2 class="impressum-heading">Online-Streitbeilegung</h2>
      <p class="impressum-text">
        Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS) bereit: 
        <a href="https://ec.europa.eu/consumers/odr/" target="_blank">https://ec.europa.eu/consumers/odr/</a>
      </p>
      <p class="impressum-text">
        Unsere E-Mail-Adresse lautet: <a href="mailto:info@npf-world.com">info@npf-world.com</a>
      </p>
      <p class="impressum-text">
        Wir sind weder bereit noch verpflichtet, an Streitbeilegungsverfahren vor einer Verbraucherschlichtungsstelle teilzunehmen.
      </p>
    </div>

  </div>

</div>

<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.
