/* =========================================================
   Basis-Styles
   Globale Einstellungen für das Dokument
========================================================= */
html {
  /* background: hsl(195 46% 10% / 1); */
  scroll-behavior: smooth;
}

/* =========================================================
   Layout & Grundstruktur der Hero-Sektion
========================================================= */
/* Header bleibt immer oben auf der Seite */
.hero-header {
  position: absolute;
  width: 100%;
}

/* Hauptbereich mit Hintergrundfarbe und Positionierung */
.hero-body-home {
  background-image: url("sternenhimmel.png");
  /* background: #1c404c; */
  overflow: hidden;
  position: relative;
}

/* Zentrierung des Inhalts im Body */
.hero-body-home .hero-body {
  justify-content: center;
  display: flex;
  align-items: center;
  padding-top: 0 !important;
}

.star-large {
  height: 0px;
  width: 180px;
  margin-left: 60vw;
  margin-top: 10vh;
}

/* =========================================================
   Hero-Effekt: Container und Spalten
========================================================= */
/* Hauptcontainer für Animation und Layout */
.hero-effect__outer {
  min-width: unset;
  width: 1120px;
  max-width: 100%;
}

/* Anordnung der Spalten, Abstand und Padding */
.hero-effect__container {
  min-width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 20px;
  padding-top: calc(50vh - 200px);
  overflow: hidden;
}

/* =========================================================
   Spalten und Typografie
========================================================= */
/* Text rechtsbündig in der ersten Spalte */
.hero-effect__col1 * {
  text-align: right;
}

/* Zweite Spalte: Begrenzung und Schriftgröße */
.hero-effect__col2 {
  width: 100%;
  max-width: 650px;
}

/* Große Titel und Namensliste */
.hero-effect__col2 .big-title,
.hero-effect__namelist {
  font-size: 65px !important;
}

/* Abstand nach oben im Container deaktivieren */
.hero-effect__container .big-title {
  padding-top: 0 !important;
}

/* =========================================================
   Animationen & Zustände der Namensliste
========================================================= */
/* Transition für die Bewegung der Namensliste */
.hero-effect__namelist {
  transition: transform 1s ease-in-out;
}

/* Standardfarbe für Namen */
.hero-effect__name {
  word-break: keep-all;
  /* color: #2e505c; */
  transition: color 0.35s ease-in-out;
  color: rgba(0,0,0,0.2);
}

/* Hervorgehobener Name */
.hero-effect__name--active {
  color: #ffe211; /* Gelb zur Hervorhebung */
}

/* =========================================================
   Dekorative Elemente
========================================================= */
/* Geschenkband-Grafik - Position und Hintergrundbild */
.geschenkband-container {
  position: absolute;
  left: 0;
  right: 0;
  margin-top: 20px;
  /* height: 167px; */
  /* background-image: url("geschenkband-3x.png"); */
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url("geschenkband.png");
  height: 320px;
  background-size: cover;
}

/* Zusätzlicher Text unten */
.hero-zusatztext {
  color: white;
  margin-top: 200px;
}

/* =========================================================
   Responsive Design: Anpassungen für verschiedene Geräte
========================================================= */
@media (max-width: 1500px) {
  .hero-effect__outer {
    width: 750px;
  }

  .hero-effect__col2 {
    max-width: 440px;
  }

  .hero-effect__col2 .big-title,
  .hero-effect__namelist {
    font-size: 45px !important;
  }
}

@media (max-width: 1000px) {
  .hero-effect__outer {
    width: 650px;
  }

  .hero-effect__col2 {
    max-width: 350px;
  }

  .hero-effect__col2 .big-title,
  .hero-effect__namelist {
    font-size: 35px !important;
  }
}

@media (max-width: 650px) {
  /* Kein oberes Padding im Container */
  .hero-effect__container {
    padding-top: 0vh;
  }

  /* Spalte 1: Absolute Positionierung bei kleinem Screen */
  .hero-effect__col1 {
    position: absolute;
    margin-top: -44px;
    z-index: -1;
  }

  /* Namen linksbündig bei mobiler Ansicht */
  .hero-effect__name {
    text-align: left;
  }
}