<!-- Zeichencodierung sicherstellen -->
<meta charset="UTF-8">
<link rel="stylesheet" href="navbar.css">
<style>
  .admin-btn {
    background: linear-gradient(90deg, #444, #2a2a2a);
    color: #f0f0f0;
    padding: 8px 15px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 500;
    margin-left: 15px;
    transition: all 0.3s ease;
    font-size: 14px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
    border: none;
    display: inline-block;
  }

  .admin-btn:hover {
    background: linear-gradient(90deg, #666, #3a3a3a);
    color: #ffffff;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.4);
  }

  @media (max-width: 480px) {
    .admin-btn {
      padding: 7px 12px;
      font-size: 12.5px;
      margin-left: 10px;
      position: absolute;
      top: 10px; /* 👉 vorher 14px – jetzt minimal höher */
      left: 68px;
      z-index: 1001;
      border-radius: 25px;
      background: linear-gradient(90deg, #3a3a3a, #1f1f1f);
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
    }

    .navbar .admin-btn {
      display: inline-block;
    }

    .nav-links .admin-btn {
      display: none;
    }

    .navbar .logo img {
      height: 46px;
      width: auto;
    }

    .navbar .logo {
      padding-top: 6px;
      padding-left: 8px;
    }
  }
</style>

<nav class="navbar">
  <a href="index.php" class="logo">
    <img src="Logo.png" alt="Aurora Logo">
  </a>

  
  <button class="menu-toggle" aria-label="Menü öffnen/schließen">
    <span></span>
    <span></span>
    <span></span>
  </button>

  <div class="nav-links">
    <a href="Store.php">Store</a>
    <a href="about.php">Ãœber uns</a>
    <a href="contact.php">Kontakt</a>
    <a href="datenschutzerklaerung.php">Datenschutz</a>
    <a href="Impressum.php">Impressum</a>

          <a href="login.php" class="nav-button">Login</a>
      </div>

  <div class="overlay"></div>
</nav>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const menuToggle = document.querySelector('.menu-toggle');
    const navLinks = document.querySelector('.nav-links');
    const overlay = document.querySelector('.overlay');

    if (menuToggle && navLinks && overlay) {
      menuToggle.addEventListener('click', function(e) {
        e.stopPropagation();
        menuToggle.classList.toggle('active');
        navLinks.classList.toggle('active');
        overlay.classList.toggle('active');
        document.body.style.overflow = navLinks.classList.contains('active') ? 'hidden' : '';
      });

      overlay.addEventListener('click', function() {
        menuToggle.classList.remove('active');
        navLinks.classList.remove('active');
        overlay.classList.remove('active');
        document.body.style.overflow = '';
      });

      document.addEventListener('click', function(e) {
        if (
          navLinks.classList.contains('active') &&
          !e.target.closest('.nav-links') &&
          !e.target.closest('.menu-toggle')
        ) {
          menuToggle.classList.remove('active');
          navLinks.classList.remove('active');
          overlay.classList.remove('active');
          document.body.style.overflow = '';
        }
      });

      document.addEventListener('keydown', function(e) {
        if (navLinks.classList.contains('active') && e.key === "Escape") {
          menuToggle.classList.remove('active');
          navLinks.classList.remove('active');
          overlay.classList.remove('active');
          document.body.style.overflow = '';
        }
      });
    }

    const userDropdown = document.getElementById('userDropdown');
    const userIcon = document.getElementById('userIcon');
    const dropdownMenu = document.getElementById('dropdownMenu');

    if(userDropdown && userIcon && dropdownMenu) {
      userIcon.addEventListener('click', (e) => {
        e.stopPropagation();
        userDropdown.classList.toggle('open');
      });

      dropdownMenu.addEventListener('click', (e) => {
        e.stopPropagation();
      });

      document.addEventListener('click', () => {
        userDropdown.classList.remove('open');
      });

      userDropdown.addEventListener('keydown', function(e) {
        if (e.key === "Escape") {
          userDropdown.classList.remove('open');
        }
      });
    }
  });
</script>
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Impressum • Aurora-studios</title>
  <link rel="icon" href="Logo.png" type="image/png">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="navbar.css">
  <style>
    :root {
      --primary-color: #fff;
      --accent-color: #808080;
      --text-color: #fff;
      --bg-color: #000;
      --nav-bg: rgba(0,0,0,0.8);
      --section-bg: #0d0d0d;
      --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
      --font-body: 'Inter', system-ui, -apple-system, sans-serif;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: var(--font-body);
    }

    body {
      background-color: var(--bg-color);
      color: var(--text-color);
      line-height: 1.6;
      overflow-x: hidden;
    }

    .impressum-hero {
      padding: 70px 40px 600px;
      text-align: center;
      min-height: 100vh;
    }

    .top-line {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background: rgba(255, 255, 255, 0.3);
      backdrop-filter: blur(5px);
      z-index: 3;
    }

    .impressum-title {
      font-size: 3.5rem;
      background: linear-gradient(90deg, #F0F0F0, #808080 50%, #404040);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: 2rem;
      opacity: 0;
      transform: translateY(30px);
      animation: fadeInUp 1s ease-out forwards;
    }

    .impressum-content {
      max-width: 800px;
      margin: 0 auto;
      padding: 40px;
      font-size: 1rem;
      opacity: 0;
      transform: translateY(30px);
      transition: 1s ease;
      color: #a0a0a0;
      line-height: 1.8;
    }

    .impressum-content.visible {
      opacity: 1;
      transform: translateY(0);
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .animated-section {
      opacity: 0;
      transform: translateY(50px);
      transition: 1s;
    }

    .visible {
      opacity: 1;
      transform: translateY(0);
    }
  </style>
</head>
<body>
  <section class="impressum-hero" style="margin-top:80px;">
    <div class="top-line"></div>
    <h1 class="impressum-title">Impressum</h1>
    <div class="impressum-content animated-section">
      <p><strong>Angaben gem&auml;&szlig; &sect; 5 TMG</strong></p>
      <p>Henry Felsberg<br>Poststra&szlig;e 1<br>37691 Boffzen<br>Deutschland</p>

      <p><strong>Telefon:</strong> 0171 / 5891699<br>
      <strong>E-Mail:</strong> <a href="mailto:Henry.Felsberg@gmx.net">Henry.Felsberg@gmx.net</a></p>

      <p><strong>Angaben zur Gewerbeanmeldung:</strong><br>
      Gewerbeanmeldung gem&auml;&szlig; &sect; 14 GewO beim Ordnungsamt Boffzen.</p>

      <p><strong>Umsatzsteuer:</strong><br>
      Gem&auml;&szlig; &sect; 19 UStG wird keine Umsatzsteuer erhoben und ausgewiesen.</p>

      <p><strong>Verantwortlich f&uuml;r den Inhalt nach &sect; 55 Abs. 2 RStV:</strong><br>
      Henry Felsberg</p>
    </div>
  </section>

  <script>
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('visible');
        }
      });
    }, { threshold: 0.1 });

    document.querySelectorAll('.animated-section').forEach((element) => {
      observer.observe(element);
    });
  </script>
</body>
</html>