/* style.css */

/* Grundlegendes */
html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  overflow-x: hidden;
}

section {
  scroll-snap-align: start;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100vw;
  box-sizing: border-box;
}

/* INTRO */
#intro {
  height: 100vh;
  background: black;
  color: white;
  position: relative;
  text-align: center;
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
  pointer-events: none;
}

.logo-start img {
  max-width: 600px;
  width: 80%;
  margin-bottom: 30px;
}

/* Scroll-Pfeil Container */
.scroll-arrow-container {
  position: absolute;
  bottom: 40px;
  z-index: 10000;
  cursor: pointer;
  pointer-events: auto;
  animation: bounce 1.5s infinite;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Pfeil als Winkel */
.scroll-arrow {
  width: 20px;
  height: 20px;
  border-bottom: 3px solid white;
  border-right: 3px solid white;
  transform: rotate(45deg); /* zeigt nach unten */
}

/* Vertikale Bounce-Animation */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(10px); }
  60% { transform: translateY(5px); }
}

/* ABOUT */
#about {
  height: 100vh;
  background: #f2f2f2;
  width: 100vw;
  padding: 50px 20px;
  text-align: center;
}

/* CONTACT */
#contact {
  height: 100vh;
  background: #f2f2f2;
  width: 100vw;
  padding: 50px 20px;
  text-align: center;
}

/* Fade-Out Effekt für Intro */
#intro {
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

/* MEDIA QUERIES */
@media (max-width: 768px) {
  .teaser img {
    width: 45vw;
  }

  #intro .logo-start img {
    max-width: 80%;
  }

  #main {
    padding: 30px 15px;
  }

  #contact {
    padding: 30px 15px;
  }
}

@media (max-width: 480px) {
  .teaser img {
    width: 80vw;
  }

  #intro .logo-start img {
    max-width: 90%;
  }
}