/* styles.css */

/* Verhindere horizontales Scrollen auf der gesamten Seite */
body,
html {
  overflow-x: hidden;
  margin: 0; /* Entfernt eventuelle Ränder */
}

.hero-background {
  position: relative;
  background-image: url("img/Key Art/AC Shadows_Fan Kit_Key Art_Ultimate_Full.jpg"); /* Dein Hintergrundbild */
  background-size: cover;
  background-position: center;
  height: 100vh;
  overflow: hidden;
}

.hero-body {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  text-align: center;
  padding: 0 20px;
}

.cta-button {
  background-color: #e31c1c;
  color: white;
  padding: 15px 25px;
  font-size: 18px;
  text-transform: uppercase;
  border-radius: 5px;
  margin-top: 20px;
}

.spacing-top {
  margin-top: 20px;
}

/* Fügt Abstand zwischen den Absätzen hinzu */
.feature-list {
  list-style-type: none; /* Entfernt die Standardaufzählungspunkte */
  padding: 0;
  margin: 0;
}

.feature-list li {
  margin-bottom: 20px; /* Abstand zwischen den einzelnen Listenelementen */
}

.feature-list li strong {
  font-size: 1.2em; /* Macht die Überschrift fett und etwas größer */
  margin-bottom: 10px; /* Abstand zwischen der Überschrift und dem Text */
  display: block;
}

.feature-list li p {
  font-size: 1em; /* Normale Textgröße */
  line-height: 1.6; /* Erhöht den Zeilenabstand für bessere Lesbarkeit */
  margin-bottom: 15px; /* Fügt Abstand nach jedem Absatz hinzu */
}

/* Sorgt dafür, dass das Bild 100% der Breite der Spalte einnimmt */
.column.is-half img {
  width: 100%;
  height: auto;
  object-fit: cover; /* Bild wird innerhalb der Box zugeschnitten, ohne verzerrt zu werden */
}

/* Container für das Video */
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 Verhältnis für das Video */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  background: black; /* Hintergrundfarbe für den Fall, dass das Video nicht geladen wird */
  display: flex;
  justify-content: center; /* Zentriert das iframe im Container */
}

/* iframe wird auf eine größere Höhe gesetzt */
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* Die Breite nimmt immer 100% des Containers ein */
  height: 100%; /* Erhöht die Höhe auf 150% des ursprünglichen Verhältnisses */
}

.columns {
  display: flex;
  justify-content: center; /* Zentriert die Spalten horizontal */
  align-items: center; /* Zentriert die Spalten vertikal */
  gap: 20px; /* Fügt Abstand zwischen den Spalten hinzu */
}

/* Stellt sicher, dass das Bild die gesamte Karte ausfüllt */
.card {
  position: relative;
  overflow: hidden;
  height: 100%; /* Die Karte nimmt die gesamte Höhe ein */
}

.card-image {
  position: relative;
  width: 100%;
  height: 100%;
}

.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Sorgt dafür, dass das Bild die Karte vollständig ausfüllt */
}

/* Stellt sicher, dass der Text immer innerhalb der Karte bleibt */
.card-content {
  position: absolute;
  bottom: 0px; /* Positioniere den Text unten */
  left: 0px; /* Abstand von der linken Seite */
  right: 0px; /* Abstand von der rechten Seite */
  color: white;
  z-index: 1; /* Text bleibt über dem Bild */
  background: rgba(
    0,
    0,
    0,
    0.5
  ); /* Leichter schwarzer Hintergrund für bessere Lesbarkeit */
  padding: 10px;
  border-radius: 5px;
}

/* Optionale Hover-Effekte für die Karte */
.card:hover .card-img {
  transform: scale(
    1.1
  ); /* Zoome das Bild leicht heran, wenn die Karte gehobert wird */
  transition: transform 0.3s ease-in-out;
}

/* Container für das Video */
.card-image {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden; /* Stellt sicher, dass das Video den Container nicht überschreitet */
}

/* Video selbst */
.card-image video {
  width: 100%; /* Breite auf 100% setzen */
  height: 100%; /* Höhe auf 100% setzen */
  object-fit: cover; /* Das Video wird so skaliert, dass es den gesamten Container ausfüllt */
}

@media (max-width: 430px) {
  .columns {
    flex-direction: column; /* Auf kleineren Bildschirmen wird der Inhalt untereinander gestapelt */
  }

  .column {
    margin-bottom: 20px; /* Fügt Abstand zwischen den Spalten hinzu */
  }

  .hero .title {
    font-size: 10rem; /* Kleinere Schriftgröße auf mobilen Geräten */
    line-height: 1.2; /* Erhöhte Zeilenhöhe, damit der Text nicht zu gedrängt aussieht */
    padding-top: 3rem;
    word-wrap: break-word;
  }

  .hero .subtitle {
    font-size: 1.5rem !important; /* Noch kleinere Schriftgröße für den Untertitel auf mobilen Geräten */
    line-height: 1.2; /* Zeilenhöhe für den Untertitel auf mobilen Geräten */
    word-wrap: break-word;
    margin-top: 1.7rem;
  }

  /* CTA-Button Anpassungen */
  .cta-button {
    padding: 12px 8px; /* Kleinere Polsterung auf mobilen Geräten */
    font-size: 1rem; /* Kleinere Schriftgröße für den Button */
  }

  .ytp-cued-thumbnail-overlay-image {
    height: 200px; /* Kleinere Höhe auf Handys */
    background-size: contain; /* Hintergrundbild wird angepasst, um das Containerverhältnis zu wahren */
  }
  .video-container iframe {
    width: 100%;
    height: 100%;
  }
}

@media (max-width: 768px) {
  .columns {
    flex-direction: column; /* Auf kleineren Bildschirmen wird der Inhalt untereinander gestapelt */
  }

  .column {
    margin-bottom: 20px; /* Fügt Abstand zwischen den Spalten hinzu */
  }

  .hero .title {
    font-size: 2rem !important; /* Kleinere Schriftgröße auf mobilen Geräten */
    line-height: 1.5; /* Erhöhte Zeilenhöhe, damit der Text nicht zu gedrängt aussieht */
    word-wrap: break-word;
  }

  .hero .subtitle {
    font-size: 0.1rem; /* Noch kleinere Schriftgröße für den Untertitel auf mobilen Geräten */
    line-height: 1.2; /* Zeilenhöhe für den Untertitel auf mobilen Geräten */
    word-wrap: break-word;
    margin-top: 3rem;
  }

  /* CTA-Button Anpassungen */
  .cta-button {
    padding: 12px 8px; /* Kleinere Polsterung auf mobilen Geräten */
    font-size: 1rem; /* Kleinere Schriftgröße für den Button */
  }

  .video-container iframe {
    width: 100%;
    height: 100%;
  }
  .ytp-cued-thumbnail-overlay-image {
    height: 200px; /* Kleinere Höhe auf Handys */
    background-size: contain; /* Hintergrundbild wird angepasst, um das Containerverhältnis zu wahren */
  }
}