Embed

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


<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />


<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin />


<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" crossorigin="anonymous" referrerpolicy="no-referrer" />

<style>
  /* Hide foreign header (Durable) */
  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;
  }

  body {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
</style>

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

    
    <div class="header-left">
      <a href="https://www.instagram.com/nobleprotectionfilm" class="social-icon" title="Noble Protection Film on Instagram" aria-label="Noble Protection Film on Instagram" target="_blank" rel="noopener noreferrer">
        <i class="fab fa-instagram" aria-hidden="true"></i>
      </a>
      <a href="https://www.youtube.com/@nobleprotectionfilm" class="social-icon" title="Noble Protection Film on YouTube" aria-label="Noble Protection Film on YouTube" target="_blank" rel="noopener noreferrer">
        <i class="fab fa-youtube" aria-hidden="true"></i>
      </a>
      <a href="https://www.tiktok.com/@nobleprotectionfilm" class="social-icon" title="Noble Protection Film on TikTok" aria-label="Noble Protection Film on TikTok" target="_blank" rel="noopener noreferrer">
        <i class="fab fa-tiktok" aria-hidden="true"></i>
      </a>
    </div>

    
    <div class="header-center">
      <a href="https://npf-world.com/en/homepage" class="logo-link" aria-label="Noble Protection Film – Home">
        <img
          src="https://cdn.durable.co/blocks/6F9Z5HJCHYZQAJ8R6lkkSnFgrvAThoPIRyXMfgOHRcTyLnvPfWAQ8SXuqN6m3WCz.png"
          alt="Noble Protection Film Logo"
          class="header-logo"
          width="auto"
          height="70"
          fetchpriority="high"
          decoding="async"
        />
      </a>

      
      <nav class="header-nav" aria-label="Main Navigation">
        <a href="https://npf-world.com/en/products" class="nav-link">Products</a>
        <span class="nav-divider" aria-hidden="true">|</span>
        <a href="https://npf-world.com/en/gallery" class="nav-link">Gallery</a>
        <span class="nav-divider" aria-hidden="true">|</span>
        <a href="https://npf-world.com/en/about-us" class="nav-link">About Us</a>
      </nav>
    </div>

    
    <div class="header-right">
      <div class="language-selector">
        <a href="https://npf-world.com" class="lang-btn" hreflang="de" aria-label="Switch to German">
          <span class="flag-icon" aria-hidden="true">🇩🇪</span>
          <span class="lang-text">Deutsch</span>
        </a>
      </div>
      <a href="https://npf-world.com/en/contact" class="contact-btn">Contact</a>
    </div>
  </div>

  
  <button
    class="mobile-menu-toggle"
    id="mobile-toggle"
    aria-label="Open menu"
    aria-expanded="false"
    aria-controls="mobile-menu"
    type="button"
  >
    <span aria-hidden="true"></span>
    <span aria-hidden="true"></span>
    <span aria-hidden="true"></span>
  </button>

  
  <div class="mobile-menu" id="mobile-menu" aria-hidden="true" role="dialog" aria-label="Mobile Navigation Menu">

    <nav class="mobile-nav" aria-label="Mobile Navigation">
      <a href="https://npf-world.com/en/products" class="mobile-nav-link">Products</a>
      <a href="https://npf-world.com/en/gallery" class="mobile-nav-link">Gallery</a>
      <a href="https://npf-world.com/en/about-us" class="mobile-nav-link">About Us</a>
    </nav>

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

    <div class="mobile-language">
      <a href="https://npf-world.com" class="mobile-lang-btn" hreflang="de" aria-label="Switch to German">
        <span class="flag-icon" aria-hidden="true">🇩🇪</span> Deutsch
      </a>
    </div>

    <div class="mobile-social">
      <a href="https://www.instagram.com/nobleprotectionfilm" class="mobile-social-icon" aria-label="Noble Protection Film on Instagram" target="_blank" rel="noopener noreferrer">
        <i class="fab fa-instagram" aria-hidden="true"></i>
      </a>
      <a href="https://www.youtube.com/@nobleprotectionfilm" class="mobile-social-icon" aria-label="Noble Protection Film on YouTube" target="_blank" rel="noopener noreferrer">
        <i class="fab fa-youtube" aria-hidden="true"></i>
      </a>
      <a href="https://www.tiktok.com/@nobleprotectionfilm" class="mobile-social-icon" aria-label="Noble Protection Film on TikTok" target="_blank" rel="noopener noreferrer">
        <i class="fab fa-tiktok" aria-hidden="true"></i>
      </a>
    </div>
  </div>
</header>

<style>
/* ============================================ */
/* NPF HEADER EN – CSS                          */
/* ============================================ */

/* Design Tokens */
#npf-main-header {
  --npf-gold:         #f4d689;
  --npf-gold-dim:     rgba(244, 214, 137, 0.4);
  --npf-gold-faint:   rgba(244, 214, 137, 0.1);
  --npf-gold-faint2:  rgba(244, 214, 137, 0.25);
  --npf-gold-glow:    rgba(244, 214, 137, 0.3);
  --npf-gold-glow-lg: rgba(244, 214, 137, 0.5);
  --npf-dark:         #20120b;
  --npf-bg:           rgba(32, 18, 11, 0.92);
  --npf-transition:   0.3s ease;
}

#npf-main-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  background: var(--npf-bg) !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', Georgia, 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;
}

/* Left Side – Social Icons */
.header-left {
  display: flex !important;
  gap: 15px;
  align-items: center;
}

.social-icon {
  color: var(--npf-gold) !important;
  font-size: 20px;
  transition: color var(--npf-transition), opacity var(--npf-transition), transform var(--npf-transition);
  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 var(--npf-gold-glow);
}

/* Center – 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: transform var(--npf-transition), filter var(--npf-transition);
  filter: drop-shadow(0 2px 8px var(--npf-gold-glow));
}

.header-logo:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 4px 12px var(--npf-gold-glow-lg));
}

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

.nav-link {
  color: var(--npf-gold) !important;
  text-decoration: none !important;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: color var(--npf-transition), opacity var(--npf-transition), text-shadow var(--npf-transition);
  opacity: 0.9;
  font-weight: 400;
}

.nav-link:hover {
  opacity: 1;
  color: #fff !important;
  text-shadow: 0 0 10px var(--npf-gold-glow);
}

.nav-divider {
  color: var(--npf-gold-dim);
  font-size: 12px;
}

/* Right Side – Language + Contact */
.header-right {
  display: flex !important;
  gap: 20px;
  align-items: center;
  justify-content: flex-end;
}

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

.lang-btn {
  background: transparent !important;
  border: none !important;
  color: var(--npf-gold) !important;
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 6px;
  transition: opacity var(--npf-transition), background var(--npf-transition);
  display: flex !important;
  align-items: center;
  gap: 6px;
  opacity: 0.85;
  text-decoration: none !important;
}

.lang-btn:hover {
  opacity: 1;
  background: var(--npf-gold-faint) !important;
}

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

.contact-btn {
  background: linear-gradient(135deg, var(--npf-gold) 0%, #c5974a 100%) !important;
  color: var(--npf-dark) !important;
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 10px 24px;
  border-radius: 8px;
  border: 2px solid var(--npf-gold) !important;
  text-decoration: none !important;
  transition: background var(--npf-transition), transform var(--npf-transition), box-shadow var(--npf-transition);
  box-shadow: 0 4px 15px var(--npf-gold-glow);
  white-space: nowrap;
  display: inline-block !important;
}

.contact-btn:hover {
  background: linear-gradient(135deg, #c5974a 0%, var(--npf-gold) 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--npf-gold-glow-lg);
}

/* Mobile Menu Toggle */
.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: var(--npf-gold);
  border-radius: 2px;
  transition: transform var(--npf-transition), opacity var(--npf-transition);
}

.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 */
.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);
  -webkit-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 {
  color: var(--npf-gold) !important;
  font-size: 24px;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: none !important;
  text-align: center;
  transition: color var(--npf-transition), background var(--npf-transition);
  padding: 15px;
  border-bottom: 0 !important;
  display: block !important;
}

.mobile-nav-link:hover {
  color: #fff !important;
  background: var(--npf-gold-faint);
}

/* Contact button in burger menu */
#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, var(--npf-gold) 0%, #c5974a 100%) !important;
  color: var(--npf-dark) !important;
  border: 2px solid var(--npf-gold) !important;
  box-shadow: 0 6px 20px rgba(244, 214, 137, 0.25);
  transition: filter var(--npf-transition);
}

#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: var(--npf-gold-faint) !important;
  border: 2px solid rgba(244, 214, 137, 0.3) !important;
  color: var(--npf-gold) !important;
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 15px;
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--npf-transition), border-color var(--npf-transition);
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none !important;
}

.mobile-lang-btn:hover {
  background: var(--npf-gold-faint2) !important;
  border-color: var(--npf-gold) !important;
}

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

.mobile-social-icon {
  color: var(--npf-gold) !important;
  font-size: 32px;
  transition: color var(--npf-transition), transform var(--npf-transition);
  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;
  }

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

  function hideDurableHeader() {
    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');
      }
    });

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

    var 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');
    }
  }

  document.addEventListener('DOMContentLoaded', function () {
    hideDurableHeader();
    setTimeout(hideDurableHeader, 500);
    setTimeout(hideDurableHeader, 1000);

    var mobileToggle = document.getElementById('mobile-toggle');
    var mobileMenu   = document.getElementById('mobile-menu');

    function closeMobileMenu() {
      if (!mobileToggle || !mobileMenu) return;
      mobileToggle.classList.remove('active');
      mobileMenu.classList.remove('active');
      mobileToggle.setAttribute('aria-expanded', 'false');
      mobileToggle.setAttribute('aria-label', 'Open menu');
      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');
      mobileToggle.setAttribute('aria-label', 'Close menu');
      mobileMenu.setAttribute('aria-hidden', 'false');
      document.body.style.overflow = 'hidden';
    }

    if (mobileToggle && mobileMenu) {
      mobileToggle.addEventListener('click', function () {
        mobileMenu.classList.contains('active') ? closeMobileMenu() : openMobileMenu();
      });

      mobileMenu.querySelectorAll('a').forEach(function (link) {
        link.addEventListener('click', closeMobileMenu);
      });
    }

    var npfHeader = document.getElementById('npf-main-header');
    window.addEventListener('scroll', function () {
      if (!npfHeader) return;
      npfHeader.style.padding = window.scrollY > 100
        ? '10px 30px'
        : '15px 30px';
    }, { passive: true });
  });
}());
</script>

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

<style>
/* =========================
   CSS CUSTOM PROPERTIES
========================= */
:root {
  --gold: #f4d689;
  --dark: #20120b;

  --gold-50: rgba(244, 214, 137, 0.50);
  --gold-35: rgba(244, 214, 137, 0.35);
  --gold-25: rgba(244, 214, 137, 0.25);
  --gold-10: rgba(244, 214, 137, 0.10);

  --dark-88: rgba(32, 18, 11, 0.88);
  --dark-75: rgba(32, 18, 11, 0.75);

  --npf-transition: 0.3s ease;
}

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

/* =========================
   PAGE WRAPPER
========================= */
#npf-danke-page {
  width: 100%;
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Libre Baskerville', Georgia, 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/6F9Z5HJCHYZQAJ8R6lkkSnFgrvAThoPIRyXMfgOHRcTyLnvPfWAQ8SXuqN6m3WCz.png');
  background-size: 180px 180px;
  background-repeat: repeat;
  background-position: center;
  opacity: .10;
  z-index: 0;
  pointer-events: none;
}

/* =========================
   CONTENT
========================= */
.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 var(--gold-35);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.4),
    0 0 30px var(--gold-10);
  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; } }

/* =========================
   TEXT
========================= */
.danke-eyebrow {
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .85;
  margin: 0 0 16px;
  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;
  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 var(--gold-50);
  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, var(--dark-88) 0%, var(--dark-75) 100%);
  border: 1px solid var(--gold-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);
  -webkit-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;
}

.danke-info-text strong {
  color: var(--gold);
  opacity: 1;
}

/* =========================
   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 var(--gold-35);
  border-radius: 8px;
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color var(--npf-transition),
    transform    var(--npf-transition),
    box-shadow   var(--npf-transition);
}

.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 var(--gold-10);
}

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

/* =========================
   REDUCED MOTION
========================= */
@media (prefers-reduced-motion: reduce) {
  .danke-check-wrap,
  .check-circle,
  .check-tick,
  .danke-eyebrow,
  .danke-title,
  .danke-divider,
  .danke-text,
  .danke-info-box,
  .danke-btn-group {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
  .danke-btn-primary {
    transition: none !important;
  }
}

/* =========================
   RESPONSIVE – 768px
========================= */
@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 { width: 100%; justify-content: center; }
}
</style>

<div id="npf-danke-page" role="main" aria-label="Thank You – Enquiry received">
  <div class="logo-pattern-bg" aria-hidden="true"></div>

  <div class="danke-content">

    
    <div
      class="danke-check-wrap"
      role="img"
      aria-label="Enquiry successfully submitted"
    >
      <svg
        viewBox="0 0 52 52"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
        focusable="false"
      >
        <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">Thank You</h1>
    <div class="danke-divider" aria-hidden="true"></div>

    <p class="danke-text">
      Your enquiry has been successfully received.<br>
      We will get back to you personally as soon as possible –
      for individual advice at the highest level.
    </p>

    
    <div class="danke-info-box" role="list" aria-label="Next steps">

      <div class="danke-info-row" role="listitem">
        <span class="danke-info-icon" aria-hidden="true">⏱</span>
        <span class="danke-info-text">Response time typically within 24 hours</span>
      </div>

      <div class="danke-info-row" role="listitem">
        <span class="danke-info-icon" aria-hidden="true">✉</span>
        <span class="danke-info-text">You will receive a confirmation to your e-mail address</span>
      </div>

      <div class="danke-info-row" role="listitem">
        <span class="danke-info-icon" aria-hidden="true">☎</span>
        <span class="danke-info-text">
          For urgent enquiries:
          <strong>
            <a href="tel:+4972214082240" style="color:var(--gold);text-decoration:none;">+49 7221 4082240</a>
          </strong>
        </span>
      </div>

    </div>

    
    <nav class="danke-btn-group" aria-label="Continue navigation">
      <a
        href="https://npf-world.com/products"
        class="danke-btn-primary"
      >
        ← Back to Products
      </a>
      <a
        href="https://npf-world.com/en/homepage"
        class="danke-btn-primary"
      >
        Homepage
      </a>
    </nav>

  </div>
</div>

<style>
  /* Hide Durable footer + spacing elements */
  body > footer:not(#npf-footer),
  [data-durable-footer],
  .durable-footer,
  .site-footer:not(#npf-footer),
  footer[class*="footer"]:not(#npf-footer),
  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 {
    --npf-gold:         #f4d689;
    --npf-gold-dim:     rgba(244, 214, 137, 0.3);
    --npf-gold-faint:   rgba(244, 214, 137, 0.2);
    --npf-gold-faint2:  rgba(244, 214, 137, 0.15);
    --npf-gold-glow:    rgba(244, 214, 137, 0.3);
    --npf-gold-glow-lg: rgba(244, 214, 137, 0.5);
    --npf-transition:   0.3s ease;
    --npf-transition-sm: 0.2s ease;

    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 var(--npf-gold-faint);
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.4);
    padding: 50px 30px 30px;
    font-family: 'Libre Baskerville', Georgia, serif;
    z-index: 999997;
    margin-top: 0 !important;
  }

  .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 var(--npf-gold-faint);
  }

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

  .footer-social-icon {
    color: var(--npf-gold);
    font-size: 22px;
    transition: color var(--npf-transition), opacity var(--npf-transition), transform var(--npf-transition);
    opacity: 0.85;
    text-decoration: none;
  }

  .footer-social-icon:hover {
    opacity: 1;
    transform: translateY(-3px);
    color: #fff;
    text-shadow: 0 0 15px var(--npf-gold-glow);
  }

  /* Center – 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: transform var(--npf-transition), filter var(--npf-transition);
    filter: drop-shadow(0 2px 8px var(--npf-gold-glow));
  }

  .footer-logo:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 4px 12px var(--npf-gold-glow-lg));
  }

  .footer-tagline {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--npf-gold);
    opacity: 0.85;
    margin: 0;
    font-style: italic;
  }

  /* Right Side – Contact Info */
  .footer-right {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
    text-align: right;
  }

  .footer-contact-item {
    font-size: 13px;
    color: var(--npf-gold);
    opacity: 0.9;
    letter-spacing: 1px;
    margin: 0;
  }

  .footer-contact-link {
    color: var(--npf-gold);
    text-decoration: none;
    border-bottom: 1px solid var(--npf-gold-dim);
    transition: color var(--npf-transition-sm), border-color var(--npf-transition-sm);
    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: var(--npf-gold);
    text-decoration: none;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: color var(--npf-transition), opacity var(--npf-transition);
    opacity: 0.9;
    font-weight: 400;
    position: relative;
  }

  .footer-nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--npf-gold);
    transition: width var(--npf-transition);
  }

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

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

  .footer-nav-divider {
    color: var(--npf-gold-dim);
    font-size: 12px;
  }

  /* ============================================ */
  /* FOOTER BOTTOM – COPYRIGHT                    */
  /* ============================================ */
  .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 25px;
    border-top: 1px solid var(--npf-gold-faint2);
  }

  .footer-copyright {
    font-size: 11px;
    color: var(--npf-gold);
    opacity: 0.75;
    letter-spacing: 1px;
    margin: 0;
  }

  .footer-credits {
    font-size: 11px;
    color: var(--npf-gold);
    opacity: 0.75;
    letter-spacing: 1px;
    margin: 0;
  }

  .footer-credits-link {
    color: var(--npf-gold);
    text-decoration: none;
    border-bottom: 1px solid var(--npf-gold-dim);
    transition: color var(--npf-transition-sm), border-color var(--npf-transition-sm);
  }

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

    .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" role="contentinfo">
  <div class="footer-container">

    
    <div class="footer-top">

      
      <div class="footer-left">
        <a href="https://www.instagram.com/nobleprotectionfilm" class="footer-social-icon" title="Noble Protection Film on Instagram" aria-label="Noble Protection Film on Instagram" target="_blank" rel="noopener noreferrer">
          <i class="fab fa-instagram" aria-hidden="true"></i>
        </a>
        <a href="https://www.youtube.com/@nobleprotectionfilm" class="footer-social-icon" title="Noble Protection Film on YouTube" aria-label="Noble Protection Film on YouTube" target="_blank" rel="noopener noreferrer">
          <i class="fab fa-youtube" aria-hidden="true"></i>
        </a>
        <a href="https://www.tiktok.com/@nobleprotectionfilm" class="footer-social-icon" title="Noble Protection Film on TikTok" aria-label="Noble Protection Film on TikTok" target="_blank" rel="noopener noreferrer">
          <i class="fab fa-tiktok" aria-hidden="true"></i>
        </a>
      </div>

      
      <div class="footer-center">
        <a href="https://npf-world.com/en/homepage" class="footer-logo-link" aria-label="Noble Protection Film – Home">
          <img
            src="https://cdn.durable.co/blocks/8zkfc8J9hbGSLMxFacLopthHlGc6O7NSF9vQKR9AyNWIbUXUUFQ7ztfj7KdY3HiY.png"
            alt="Noble Protection Film Logo"
            class="footer-logo"
            width="auto"
            height="60"
            loading="lazy"
            decoding="async"
          />
        </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 7221 4082240</p>
        <p class="footer-contact-item">Baden-Baden, Germany</p>
      </div>
    </div>

    
    <nav class="footer-middle" aria-label="Footer Navigation">
      <a href="https://npf-world.com/en/contact" class="footer-nav-link">Contact</a>
      <span class="footer-nav-divider" aria-hidden="true">|</span>
      <a href="https://npf-world.com/en/privacy" class="footer-nav-link">Privacy Policy</a>
      <span class="footer-nav-divider" aria-hidden="true">|</span>
      <a href="https://npf-world.com/en/warranty-terms" class="footer-nav-link">Warranty Terms</a>
      <span class="footer-nav-divider" aria-hidden="true">|</span>
      <a href="https://npf-world.com/en/terms" class="footer-nav-link">Terms &amp; Conditions</a>
      <span class="footer-nav-divider" aria-hidden="true">|</span>
      <a href="https://npf-world.com/en/legal" class="footer-nav-link">Legal Notice</a>
    </nav>

    
    <div class="footer-bottom">
      <p class="footer-copyright">© 2026 Noble Protection Film GmbH. All rights reserved.</p>
      <p class="footer-credits">
        Design &amp; Development: <a href="https://www.evotize.com" target="_blank" rel="noopener noreferrer" class="footer-credits-link">Evotize</a>
      </p>
    </div>

  </div>
</footer>

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

  function hideAllDurableElements() {
    document.querySelectorAll('footer').forEach(function (el) {
      if (el.id !== 'npf-footer') {
        el.style.setProperty('display', 'none', 'important');
        el.style.setProperty('visibility', 'hidden', 'important');
        el.style.setProperty('height', '0', 'important');
        el.style.setProperty('overflow', 'hidden', 'important');
        el.style.setProperty('position', 'absolute', 'important');
        el.style.setProperty('top', '-9999px', 'important');
      }
    });

    document.querySelectorAll('[class*="spacing"], [class*="divider"], [data-block-type*="spacer"], [data-block-type*="divider"], hr, section[style*="background"]').forEach(function (el) {
      if (!el.closest('#npf-footer')) {
        el.style.setProperty('display', 'none', 'important');
        el.style.setProperty('visibility', 'hidden', 'important');
        el.style.setProperty('height', '0', 'important');
        el.style.setProperty('margin', '0', 'important');
        el.style.setProperty('padding', '0', 'important');
      }
    });

    var npfFooter = document.getElementById('npf-footer');
    if (npfFooter) {
      npfFooter.style.setProperty('display', 'block', 'important');
      npfFooter.style.setProperty('visibility', 'visible', 'important');
      npfFooter.style.setProperty('margin-top', '0', 'important');
    }
  }

  document.addEventListener('DOMContentLoaded', hideAllDurableElements);
  setTimeout(hideAllDurableElements, 100);
  setTimeout(hideAllDurableElements, 500);
  setTimeout(hideAllDurableElements, 1000);
  setTimeout(hideAllDurableElements, 2000);

  var observer = new MutationObserver(hideAllDurableElements);
  observer.observe(document.body, { childList: true, subtree: true });
}());
</script>