/* Grundlegendes Setup basierend auf dem Video-Stil */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,
html {
  height: 100%;
  font-family: "Arial", sans-serif;
  color: white;
}

/* Der Wrapper aktiviert den 3D-Raum für den Parallax-Effekt */
.wrapper {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 1px; /* Erzeugt die Tiefenwahrnehmung */
}

/* Gemeinsame Stile für die Parallax-Sektionen */
.parallax-section {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  z-index: -1;
}

/* Das Hintergrundbild als Pseudo-Element (wichtig für das Scrolling) */
.parallax-section::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  background-size: cover;
  background-position: center;
  min-height: 50vh;
  padding-bottom: 100px;
  /* translateZ schiebt das Bild in den Hintergrund, scale gleicht die Größe aus */
  transform: translateZ(-1px) scale(2);
  z-index: -1;
}

/* Spezifische Bilder für die Sektionen (Platzhalter von Unsplash) */
.section-1::before {
  background-position: center 50%;
  background-image: url("dji-mini-5-pro.JPG");
}

.section-2::before {
  background-image: url("drohne-2.JPG");
}

/* Der Inhalt, der sich normal bewegt */
.content {
  text-align: center;
  background: rgba(0, 0, 0, 0.4);
  padding: 2rem;
  border-radius: 10px;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
  /* Ein kleiner translateZ-Wert lässt auch den Text leicht schweben */
  transform: translateZ(0.2px) scale(0.8);
}

.content h1 {
  font-size: 4rem;
  text-transform: uppercase;
  letter-spacing: 5px;
}

/* Sektionen ohne Parallax (für Textinhalte) */
.buffer-section {
  height: 50vh;
  background: #333;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  z-index: 2;
}

.buffer-section h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: #c45800;
}

/* Styling für die Preis-Sektion */
.price-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap; /* Wichtig für die Handy-Ansicht! */
  margin-top: 30px;
  width: 90%;
  max-width: 1200px;
}

.price-card {
  background: #222;
  padding: 30px;
  border-radius: 15px;
  border: 1px solid #c45800; /* Goldener Akzent */
  min-width: 250px;
  transition: transform 0.3s ease;
}

.price-card:hover {
  transform: translateY(-10px); /* Kleiner Schwebe-Effekt */
}

.price-card h3 {
  color: #c45800;
  margin-bottom: 10px;
}

.price-card .price {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 15px;
}

.price-card ul {
  list-style: none;
  text-align: left;
  line-height: 1.8;
}

a.price-card {
  text-decoration: none;
  color: inherit;
  display: block;
  cursor: pointer;
}

/* --- Styling für den "Eindrucksvollen" Kontakt-Button --- */

#kontakt-info {
  text-align: center;
  padding: 80px 20px;
  background-color: #333; /* Passend zum Rest der Seite */
}

#kontakt-info h2 {
  font-size: 2.5rem;
  color: #fff;
  margin-bottom: 10px;
}

#kontakt-info p {
  color: #ccc;
  margin-bottom: 30px;
}

/* Der eigentliche Button */
.submit-btn {
  background: linear-gradient(
    135deg,
    #c45800 0%,
    #c45800 100%
  ); /* Gold-Verlauf */
  color: #000 !important; /* Wichtig, damit die Schrift schwarz bleibt */
  padding: 20px 50px;
  font-size: 1.2rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-radius: 50px; /* Abgerundeter "Pillen"-Look */
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Sanfter "Bounce"-Effekt */
  box-shadow: 0 15px 30px rgba(241, 196, 15, 0.2);
  border: 2px solid transparent;
  cursor: pointer;
}

/* Hover-Effekt: Wenn man mit der Maus drüberfährt */
.submit-btn:hover {
  transform: scale(1.05) translateY(-5px); /* Wird leicht größer und schwebt hoch */
  background: #000; /* Hintergrund wird schwarz */
  color: #c45800 !important; /* Schrift wird gold */
  border: 2px solid #c45800; /* Goldener Rand erscheint */
  box-shadow: 0 20px 40px rgba(196, 88, 0, 0.4);
}

/* Klick-Effekt: Wenn man draufdrückt */
.submit-btn:active {
  transform: scale(0.98);
}

.link {
  justify-content: center;
  display: flex;
  font-size: 20px;
  text-decoration: none;
  color: #ffffff;
  top: 20px;
  background-color: #333;
}

.link:hover {
  color: #c45800;
  text-decoration: underline;
}

.text1 {
font-size: 20px;
margin-bottom: 15px;
}

.text2 {
font-size: 20px;
}
/* --- Vollständige Optimierung für Smartphone & Tablet --- */
@media (max-width: 768px) {
  /* 1. Schriftgrößen anpassen */
  .content h1 {
    font-size: 2.2rem; /* Hero-Titel kleiner */
    letter-spacing: 2px;
  }

  h2 {
    font-size: 1.8rem !important; /* Alle Sektions-Überschriften */
  }

  /* 2. Abstände in den Sektionen */
  .buffer-section {
    height: auto; /* Höhe passt sich dem Inhalt an */
    padding: 60px 15px; /* Mehr Luft oben und unten */
  }

  /* 3. PREISE: Karten stapeln */
  .price-container {
    flex-direction: column; /* Karten untereinander statt nebeneinander */
    align-items: center;
    width: 100%;
    gap: 25px; /* Abstand zwischen den Karten */
  }

  .price-card {
    width: 100%; /* Karte nutzt die volle Breite */
    max-width: 320px; /* Aber wird nicht zu riesig auf Tablets */
    padding: 20px;
    transform: none !important; /* Hover-Effekt auf Touch-Geräten oft störend */
  }

  /* 4. Parallax-Glättung */
  /* Auf vielen Handys wirkt der 3D-Effekt bei translateZ(-1px) zu extrem.
Wir korrigieren hier den Zoom, damit die Bilder scharf bleiben. */
  .parallax-section::before {
    transform: translateZ(-1px) scale(2.2);
  }

  .content {
    width: 85%; /* Textbox nimmt mehr Platz ein */
    padding: 1.5rem;
    transform: translateZ(0.2px) scale(0.9); /* Text näher ran */
  }

  .submit-btn {
    padding: 15px 30px;
    font-size: 1rem;
    width: 90%; /* Fast volle Breite auf dem Handy */
  }
}