@font-face {
  font-family: 'ChunkFive';
  src: url('../schriften/ChunkFive-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Grundstruktur Hero */
.hero {
  display: flex;
  justify-content: center;
  align-items: flex-start; /* Bilder oben ausrichten */
  padding: 1rem 5% 1rem 5%; /* kleiner Abstand oben und unten */
  min-height: auto; /* Höhe passt sich dem Inhalt an */
  background: transparent; /* Hintergrund transparent */
  font-family: 'ChunkFive', sans-serif;
  gap: 2rem;
  flex-wrap: nowrap; /* horizontal anordnen auf Desktop */
  overflow-x: auto; /* falls Bildschirm zu klein, horizontal scrollen */
}

/* Bilder direkt in Hero */
.hero img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 15px;
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s ease-out;
  flex-shrink: 0; /* verhindert Verkleinerung */
  animation: float 4s ease-in-out infinite; /* Schwebe-Animation */
}

/* Sichtbar machen wenn im Viewport */
.hero.in-view img {
  opacity: 1;
  transform: none;
}

/* Animation verzögert pro Bild */
.hero.in-view img:nth-child(1) { transition-delay: 0.2s; }
.hero.in-view img:nth-child(2) { transition-delay: 0.4s; }
.hero.in-view img:nth-child(3) { transition-delay: 0.6s; }
.hero.in-view img:nth-child(4) { transition-delay: 0.8s; }

/* Schwebe-Animation */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Responsive für Tablets */
@media (max-width: 1024px) {
  .hero img {
    width: 180px;
    height: 180px;
  }
}

/* Responsive für Mobile */
@media (max-width: 768px) {
  .hero {
    flex-direction: column; /* vertikal anordnen */
    align-items: center;    /* zentriert */
    gap: 1.5rem;
    overflow-x: visible;    /* kein horizontales Scrollen */
  }
  .hero img {
    width: 150px;
    height: 150px;
  }
}