<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Schatz: Schicksalssterne</title>
<style>
  /* Allgemeine Styles */
  body, html {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    color: #fff;
    background-color: #0b0c2a;
  }

  a {
    text-decoration: none;
    color: inherit;
  }

  /* Header-Bereich (bestehend) */
  .header {
    width: 100%;
    /* hier könnt ihr euer bestehendes Header-Bild oder HTML einfügen */
  }

  /* Navigation */
  nav {
    display: flex;
    justify-content: center;
    background: rgba(11,12,42,0.6);
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 100;
  }

  nav a {
    margin: 0 20px;
    font-weight: bold;
    font-size: 1.1em;
    transition: all 0.3s ease;
  }

  nav a:hover {
    color: #9cf;
    text-shadow: 0 0 10px #9cf;
  }

  /* Hero-Bereich */
  .hero {
    position: relative;
    height: 80vh;
    background: linear-gradient(to bottom, rgba(11,12,42,0.8), rgba(11,12,42,0.9)), url('https://images.unsplash.com/photo-1582719478186-4e4ee1b87968?auto=format&fit=crop&w=1470&q=80') center/cover no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .hero h1 {
    font-size: 3em;
    color: #fff;
    text-shadow: 0 0 15px #9cf;
  }

  .hero button {
    margin-top: 20px;
    padding: 12px 30px;
    font-size: 1.2em;
    border: none;
    border-radius: 25px;
    background-color: #3cf;
    color: #0b0c2a;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px #3cf;
  }

  .hero button:hover {
    box-shadow: 0 0 25px #9cf;
    transform: translateY(-3px);
  }

  /* Content-Bereiche */
  .section {
    padding: 80px 20px;
    text-align: center;
  }

  .cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
  }

  .card {
    background: rgba(11,12,42,0.7);
    padding: 20px;
    border-radius: 15px;
    width: 250px;
    box-shadow: 0 0 15px #3cf;
    transition: transform 0.3s ease;
  }

  .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 25px #9cf;
  }

  .card h3 {
    margin-top: 0;
  }

  /* Footer */
  footer {
    background: #0b0c2a;
    padding: 40px 20px;
    text-align: center;
    border-top: 1px solid #3cf;
  }

  footer a {
    margin: 0 10px;
    color: #9cf;
    transition: all 0.3s ease;
  }

  footer a:hover {
    text-shadow: 0 0 10px #9cf;
  }

  /* Glitzernde Sterne */
  .star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #fff;
    border-radius: 50%;
    animation: twinkle 2s infinite;
  }

  @keyframes twinkle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
  }
</style>
</head>
<body>

<!-- Header (bestehend) -->
<div class="header">
  <!-- Euer bestehender Header-Code hier -->
</div>

<!-- Navigation -->
<nav>
  <a href="#">Home</a>
  <a href="#">Über uns</a>
  <a href="#">Angebote</a>
  <a href="#">Kontakt</a>
  <a href="#">Login</a>
</nav>

<!-- Hero-Sektion -->
<section class="hero">
  <h1>Finde dein Schicksal unter den Sternen</h1>
  <button>Jetzt entdecken</button>
</section>

<!-- Content-Bereich: Angebote -->
<section class="section">
  <h2>Unsere Angebote</h2>
  <div class="cards">
    <div class="card">
      <h3>Angebot 1</h3>
      <p>Kurzbeschreibung des Angebots mit magischem Flair.</p>
      <button>Mehr erfahren</button>
    </div>
    <div class="card">
      <h3>Angebot 2</h3>
      <p>Kurzbeschreibung des Angebots mit magischem Flair.</p>
      <button>Mehr erfahren</button>
    </div>
    <div class="card">
      <h3>Angebot 3</h3>
      <p>Kurzbeschreibung des Angebots mit magischem Flair.</p>
      <button>Mehr erfahren</button>
    </div>
  </div>
</section>

<!-- Footer -->
<footer>
  <p>&copy; 2025 Schatz: Schicksalssterne</p>
  <a href="#">Impressum</a>
  <a href="#">Datenschutz</a>
  <a href="#">Kontakt</a>
</footer>

</body>
</html>
