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;
}

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

#npf-danke-page {
  width: 100%;
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Libre Baskerville', serif;
  background: transparent;
  padding: 80px 20px;
  position: relative;
  text-align: center;
}

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

.danke-content {
  position: relative;
  z-index: 1;
  max-width: 680px;
  width: 100%;
}

/* CHECKMARK ANIMATION */
.danke-check-wrap {
  width: 90px;
  height: 90px;
  margin: 0 auto 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--dark) 0%, #000 100%);
  border: 1px solid rgba(244,214,137,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 10px 40px rgba(0,0,0,0.4),
    0 0 30px rgba(244,214,137,0.1);
  animation: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

@keyframes popIn {
  0%   { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.danke-check-wrap svg {
  width: 42px;
  height: 42px;
}

.check-circle {
  stroke: var(--gold);
  stroke-width: 2.5;
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  fill: none;
  animation: drawCircle 0.6s 0.3s ease forwards;
}

.check-tick {
  stroke: var(--gold);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  fill: none;
  animation: drawTick 0.4s 0.9s ease forwards;
}

@keyframes drawCircle {
  to { stroke-dashoffset: 0; }
}

@keyframes drawTick {
  to { stroke-dashoffset: 0; }
}

/* TEXTE */
.danke-eyebrow {
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .85;
  margin: 0 0 16px 0;
  animation: fadeUp 0.6s 0.6s ease both;
}

.danke-title {
  font-size: 40px;
  font-weight: 400;
  color: #000;
  letter-spacing: 5px;
  text-transform: uppercase;
  margin: 0 0 20px 0;
  line-height: 1.15;
  animation: fadeUp 0.6s 0.75s ease both;
}

.danke-divider {
  width: 90px;
  height: 2px;
  margin: 0 auto 28px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  box-shadow: 0 0 12px rgba(244,214,137,0.5);
  animation: fadeUp 0.6s 0.85s ease both;
}

.danke-text {
  font-family: Georgia, serif;
  font-size: 17px;
  color: #000;
  line-height: 1.9;
  margin: 0 auto 40px;
  opacity: .8;
  animation: fadeUp 0.6s 0.95s ease both;
}

/* INFO BOX */
.danke-info-box {
  background: linear-gradient(135deg, rgba(32,18,11,0.88) 0%, rgba(32,18,11,0.75) 100%);
  border: 1px solid rgba(244,214,137,0.25);
  border-radius: 14px;
  padding: 32px 36px;
  margin: 0 auto 44px;
  box-shadow: 0 12px 50px rgba(0,0,0,0.3);
  animation: fadeUp 0.6s 1.05s ease both;
  backdrop-filter: blur(10px);
}

.danke-info-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(244,214,137,0.1);
}

.danke-info-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.danke-info-row:first-child {
  padding-top: 0;
}

.danke-info-icon {
  font-size: 20px;
  flex-shrink: 0;
  width: 32px;
  text-align: center;
  color: var(--gold);
  opacity: .9;
}

.danke-info-text {
  font-family: Georgia, serif;
  font-size: 15px;
  color: var(--gold);
  opacity: .85;
  text-align: left;
  line-height: 1.5;
}

/* BUTTONS */
.danke-btn-group {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  animation: fadeUp 0.6s 1.15s ease both;
}

.danke-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 38px;
  background: linear-gradient(135deg, var(--dark) 0%, #000 100%);
  color: var(--gold);
  border: 1px solid rgba(244,214,137,0.35);
  border-radius: 8px;
  font-family: 'Libre Baskerville', serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s;
}

.danke-btn-primary:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3), 0 0 20px rgba(244,214,137,0.1);
}

.danke-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 38px;
  background: transparent;
  color: #000;
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 8px;
  font-family: 'Libre Baskerville', serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s;
}

.danke-btn-secondary:hover {
  border-color: rgba(0,0,0,0.6);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

@keyframes fadeUp {
  0%   { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* RESPONSIVE */
@media (max-width: 768px) {
  #npf-danke-page { padding: 60px 20px; min-height: 70vh; }
  .danke-title { font-size: 28px; letter-spacing: 3px; }
  .danke-text { font-size: 16px; }
  .danke-info-box { padding: 24px 20px; }
  .danke-info-text { font-size: 14px; }
  .danke-btn-group { flex-direction: column; align-items: center; }
  .danke-btn-primary, .danke-btn-secondary { width: 100%; justify-content: center; }
}
</style>

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

  <div class="danke-content">

    
    <div class="danke-check-wrap">
      <svg viewBox="0 0 52 52" xmlns="http://www.w3.org/2000/svg">
        <circle class="check-circle" cx="26" cy="26" r="25"/>
        <path class="check-tick" d="M14 27 l8 8 l16 -16"/>
      </svg>
    </div>

    <p class="danke-eyebrow">Noble Protection Film</p>
    <h1 class="danke-title">Vielen Dank</h1>
    <div class="danke-divider"></div>

    <p class="danke-text">
      Ihre Anfrage ist bei uns eingegangen.<br>
      Wir melden uns schnellstmöglich persönlich bei Ihnen –
      für eine individuelle Beratung auf höchstem Niveau.
    </p>

    
    <div class="danke-info-box">
      <div class="danke-info-row">
        <span class="danke-info-icon">⏱</span>
        <span class="danke-info-text">Antwortzeit in der Regel innerhalb von 24 Stunden</span>
      </div>
      <div class="danke-info-row">
        <span class="danke-info-icon">✉</span>
        <span class="danke-info-text">Sie erhalten eine Bestätigung an Ihre E-Mail-Adresse</span>
      </div>
      <div class="danke-info-row">
        <span class="danke-info-icon">☎</span>
        <span class="danke-info-text">Bei dringenden Anfragen: <strong style="color:var(--gold);opacity:1;">+49 172 7233337</strong></span>
      </div>
    </div>

    
    <div class="danke-btn-group">
      <a href="https://npf-world.com/produkte" class="danke-btn-primary">
        ← Zurück zu den Produkten
      </a>
      <a href="https://npf-world.com" class="danke-btn-primary">
        Zur Startseite
      </a>
    </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.
