.home_area_hero {
  position: relative; /* Voraussetzung für absolutes Positionieren des Kind-Elements */
}

.image-container_hero {
  position: relative; /* Setzt den Bezugspunkt für das absolut positionierte Kind-Element */
}

#hero_overlay {
  position: absolute;
  top: 38%;
  right: 3%;
  transform: translateY(-50%);
  width: 35%;
  height: 65%;
  background-color: #fff; /* Hintergrundfarbe */
  color: black; /* Textfarbe */
  padding: 40px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center; /* Elemente linksbündig ausrichten */
  z-index: 9;
  /* box-sizing: border-box; */
  /* box-shadow: 5px 5px 5px; */
    border-radius: 50%;
}
.overlay_heading {
  display: flex; /* Flexbox-Layout verwenden */
  flex-direction: column; /* Elemente untereinander stapeln */
  align-items: center; /* Horizontal zentrieren */
  justify-content: center; /* Vertikal zentrieren */
  margin: 0; /* Entfernt den Standardabstand */
  /* padding: 20px 0; */ /* Fügt vertikalen Abstand hinzu */
  letter-spacing: 2px;
  font-variation-settings: 'wght'500;
}

.overlay_heading_part,
.overlay_heading_middle {
  font-weight: bold; /* Fettschrift für alle Teile */
  text-align: center; /* Text zentrieren */
  color: #fff; /* Standardtextfarbe */
  display: block; /* Block-Element, damit es die volle Breite einnimmt */
  font-size: 34px;
}

.overlay_heading_middle {
  font-size: 38px; /* Größere Schriftgröße für "WEEK" */  
  margin: 10px 0; /* Fügt vertikalen Abstand hinzu */
  font-variation-settings:'wght'500;
  letter-spacing: 2px;
}

.overlay_code_label {
  font-size: 24px; /* Pass die Schriftgröße nach Bedarf an */
  margin-top: 10px; /* Abstand nach oben */
  text-align: left;
    font-weight: bold;
}

.overlay_code {
	font-size: 32px;
	font-weight: bold;
	color: #fff;
	padding: 10px 30px;
	margin: 0px 0;
	background-color: #9b313d;
	letter-spacing: 3px;
	box-sizing: border-box;
	border: 1px solid #9b313d;
    text-align: center;
}

.overlay_description {
  font-size: 22px;
  text-align: center;
    width: 70%;
}
.overlay_description a:link {
    color: #fff;
}
.overlay_description span {
	display: block;
	margin: 10px 0;
}
.overlay_cta {
  background-color: #ffffff!important; /* Farbe für den CTA-Button */
  color: white; /* Textfarbe */
  text-decoration: none; /* Keine Unterstreichung */
  padding: 10px 20px; /* Innenabstand */
  /* border-radius: 5px; */ /* Abgerundete Ecken */
  font-weight: bold; /* Fettschrift */
  text-align: center; /* Zentrierter Text */
  display: block; /* Block-Element, um Breite anzunehmen */
  width: fit-content; /* Breite nach Inhalt */
  margin: 0 auto; /* Zentriert den Button horizontal */
  box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Leichter Schatten für Tiefe */
  transition: background-color 0.3s ease; /* Animation für Hover-Effekt */
  border: 1px solid;
}

.overlay_cta:hover {
  background-color: #e69500; 
  text-decoration: none; 
  color: inherit; 
    border-color: #1a1a1a;
}
@media all and (min-width: 1281px) and (max-width: 1679px){
    
   } 
@media (max-width: 1280px) {

    .overlay_code {
    font-size: 30px;
}
.overlay_heading_part {
    font-weight: bold;
    text-align: center;   
    display: block;
    font-size: 24px;
}
    .overlay_heading_middle {
    font-size: 32px;
   
    margin: 10px 0;
    letter-spacing: 2px;
    font-variation-settings: 'wght'500;
}
    }
@media (max-width: 1024px) {
    #hero_overlay {


}
    .overlay_description{
    font-size: 20px;
}
.overlay_heading_part {
    font-weight: bold;
    text-align: center;  
    display: block;
    font-size: 24px;
}
    .overlay_heading_middle {
    font-size: 30px;
 
    margin: 10px 0;
    letter-spacing: 2px;
    font-variation-settings:'wght'500;
}
    .overlay_code {
    font-size: 24px;
    font-weight: bold;   
}
    }

@media (max-width: 959px) {
  .home_area_hero {
    /* Anpassungen für den Hauptcontainer, falls notwendig */
  }

  .image-container_hero {
    /* Stelle sicher, dass das Bild-Container-Verhalten für mobile Ansichten optimiert ist */
    height: auto; /* Passt die Höhe an das enthaltene Bild an */
  }

  #hero_overlay {background-color: #fff;
    position: static; /* Entfernt die absolute Positionierung */
    width: 100%; /* Setzt die Breite auf 100% des Elternelements */    
    margin: 0; /* Entfernt etwaige Margin */
    padding: 0px 5%; /* Fügt Innenabstand hinzu, passt diesen aber für kleinere Bildschirme an */
    box-sizing: border-box; /* Stellt sicher, dass Padding und Border innerhalb der Breite des Elements enthalten sind */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Zentriert den Inhalt vertikal, falls Flex-Items vorhanden sind */
    align-items: center; /* Zentriert den Inhalt horizontal */
    transform: translateY(20px);
    border-bottom: 1px solid;
      border-radius: unset;     
      margin-bottom: 20px;
  }

  .overlay_heading {
    /* Anpassungen für die Überschriften-Elemente */
    flex-direction: column; /* Stapelt die Elemente untereinander */
      margin-bottom: 30px;
       margin-top: 10px;
  }

  .overlay_heading_part,
  .overlay_heading_middle {
    /* Anpassungen für die Textteile der Überschrift */
    text-align: center; /* Zentriert den Text */
    display: block; /* Stellt jedes Element auf eine eigene Zeile */
    margin: 5px 0; /* Fügt vertikalen Abstand zwischen den Elementen hinzu */
    font-size:32px;
      color: #1a1a1a;
  }

  .overlay_heading_middle {
    font-size: 30px; /* Verkleinert die Schriftgröße für kleinere Bildschirme */
    color: #9b313d; /* Beibehalten der Farbe für das hervorgehobene Element */
    letter-spacing: 5px;
    font-variation-settings: 'wght'500;
  }
    .overlay_code {
    font-size: 28px;
    font-weight: bold; 
    padding: 10px 20px;
    margin: 10px 0 20px 0; 
    letter-spacing: 3px;
    box-sizing: border-box;
    border: 1px solid #9b313d;
       
   
}
    .overlay_code_label {	
        margin-bottom: 30px;
        color: #9b313d; 
}

  .overlay_description {
    /* Anpassungen für den Beschreibungstext */
    text-align: center; /* Zentriert den Text */   
      font-size: 20px;
      width: 100%;
      color: #1a1a1a;
      margin-bottom: 80px;
  }.overlay_description a:link {
    color: #1a1a1a;
}

  .overlay_cta {
    /* Anpassungen für den Call-to-Action Button */
    padding: 10px; /* Verringert das Padding für kleinere Bildschirme */
    font-size: 18px; /* Passt die Schriftgröße an kleinere Bildschirme an */
    width: auto; /* Erlaubt dem Button, sich nach dem Inhalt zu richten */
      margin-bottom: 30px;
  }

.hero_titel_bottom {
	margin-top: 20px;
}
}
@media (max-width: 500px) {
    .overlay_heading {
	margin-bottom: 10px;
	margin-top: 10px;
}
    .overlay_code_label {
	font-size: 22px;
        margin-bottom: 10px
}
      .overlay_description {
      font-size: 16px;     
           margin-bottom: 50px;
  }
    .overlay_heading_part, .overlay_heading_middle {
	font-size: 22px;
}
    .overlay_code {
	font-size: 24px;
	margin: 10px 0 20px 0;	
}
}
