/* styles für die herobox mit blauer box auf der landing page */
/* ==== Global Styles ==== */
/* edit 21.07.2025

changes:

- 

*/

/* Hero Box mit Bild und Textbox */
/* Wrapper für Bild und Overlay */
.herobox {
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin: 0 auto;
  vertical-align: top; /* wichtig bei inline-block */
}

.herobox img {
  
  display: flex;
  justify-content: space-between;
    
  position: relative; /* <<< damit Bild über ::before liegt */
  z-index: 1;
 
  max-height: none;
  object-fit: cover;
/*  border: var(--bt-border);
  border-radius: 1px;

   sanftes Einblenden 
  animation: slideFadeImg 1s ease-out forwards;
  animation-delay: 0.1s; */
}
@keyframes slideFadeImg {
  from {
	opacity: 0;
	transform: translateY(20px);
  }
  to {
	opacity: 1;
	transform: translateY(0);
  }
}

/* Overlay-Box */
.herobox-box-oben .wpb_wrapper p {
  color: #fff !important;
  font-family: var(--bt-font-primary) !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.5px !important;
  font-size: 18px;

}
.herobox-box-oben {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: var(--bt-blue);
  padding: 65px 28px 24px 28px;
  max-width: 460px;
  border-radius: 6px;
  font-family: var(--bt-font-primary);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.5px;
  box-sizing: border-box;
/*  overflow: visible; /* nötig für Schatten etc. 
  box-shadow: var(--bt-shadow); */
  z-index: 2;

  /* sanftes Einblenden */
  opacity: 0;
  visibility: hidden; /* <<< Verhindert Klicks, solange unsichtbar */
  transform: translateY(20px);
  animation: slideFadeBox 2s ease-out forwards;
  animation-delay: 0.3s;
}
@keyframes slideFadeBox {
  from {
	opacity: 0;
	transform: translateY(20px);
	visibility: hidden;
  }
  to {
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
  }
}
@media only screen and (min-width: 992px) {
.herobox-box-oben .wpb_wrapper p {
  font-size: 1.65rem !important;

  }
}
/* Responsive: Box unter Bild */
@media (max-width: 768px) {
    .herobox img {
      max-height: none;
    }
    /* grüner Schatten deaktivieren */
	.herobox::before {
	  display: none;
	}
  
	/* blaue Box kleiner und höher setzen */
	.herobox-box-oben {
	  position: static;        /* Box aus dem absoluten Flow lösen */
      margin: -45px auto 0;     /* Abstand oben, zentriert */	  
	  max-width: 70% !important;     /* kompakter */
	  font-size: 16px !important;    /* Schrift kleiner */
	  padding: 16px;
	  text-align: center;
	}
    .herobox-box-oben {
	  opacity: 0;
	  transform: translateY(10px);
	  animation: slideFadeBox 1s ease-out forwards;
	  animation-delay: 0.1s;
    }
}



/* Die blaue Textbox */
.herobox .herobox-text {
	position: absolute;
	bottom: 20px;
	right: 20px;
	background-color: var(--bt-blue);
	color: var(--primary-color);
	padding: 20px;
	border-radius: 4px;
	font-family: var(--font-primary);
	max-width: 300px;
	box-shadow: var(--box-shadow);
}

.herobox .herobox-text h1,
.herobox .herobox-text h2,
.herobox .herobox-text h3 {
	color: var(--primary-color);
	margin: 0 0 10px;
}

.herobox .herobox-text p {
	color: var(--primary-color);
	margin: 0;
	font-size: 18px;
}

/* Responsives Verhalten 
@media (max-width: 768px) {
	.herobox {
		display: block;
		text-align: center;
	}
	.herobox img {
		box-shadow: none;
	}
	.herobox .herobox-text {
		position: static;
		margin: 20px auto 0;
		max-width: 90%;
		text-align: center;
	}
}
*/