html, body {
  overflow-x: hidden; 
}

/*------------------------PAGE HEADER------------------------*/
#page-header {
  background-image: url('/wp-content/uploads/images/startseite-bg1.png');
  background-size: 100% 100%;
  background-color: var(--wws-hellgruen);
  height: 535px;
  margin-top: 28vw;
 	
}

.page-header-text {
  background-image: url('/wp-content/uploads/images/startseite-page-header-bg-text.png');
  background-size: 100% 100%;
  position: relative;
  background-size: 100% 100%;
  width: 707px;
  padding: 15px 2px 11px 43px;
  z-index: 15;
  margin-left: 23.5%;
  top: 77px;
  height: 324px;
}

.page-header-text h1 {
  font-size: 72px;
 
  line-height: 100%;
  color: white;
  margin: 0;
}

.page-header-text h2 {
  font-size: 52px;
  letter-spacing:1px;
  color: white;
  margin: 1px;
}


/*------------------------CTA------------------------*/
.cta.cta-insta {
  position: absolute;
  width: 15%;
  top: 0%;
   right: 1%;
}

.cta-insta-mobile{display:none;}

.erbse2-wrapper{display:none};
.cta.cta-erbse2 {display:none;}

.cta.cta-erbse {
  position: absolute;
  top: 14vw;
  width: 280px;
  right: 1%;
   height: 156px;
}

.cta-erbse img {
  width: 162px;
  z-index: 20;
  position: absolute;
	left:24px;
}

.cta-erbse h4:nth-of-type(1) {
  color: white;
  position: absolute;
  right: 21px;
  top: 75px;
  font-size: 26px;
  background-color: var(--wws-dunkelrot);;
  padding: 5px 9px 7px 10px;
  line-height: 100%;
  margin: 0;
  font-weight: normal;
  z-index:19;
}


.cta-erbse h4:nth-of-type(2) {
color: var(--wws-dunkelrot);
  position: absolute;
  right: 2px;
  top: 93px;
  font-size: 26px;
  background-color: var(--wws-gelb);
  padding: 27px 24px 8px 24px;
  line-height: 100%;
  margin: 0;
  font-weight: normal;
  z-index: 18;
  letter-spacing: 2px;
}

@keyframes wobble-cta {
  0%   { transform: translateX(0); }
  15%  { transform: translateX(-4px) rotate(-1deg); }
  30%  { transform: translateX(3px) rotate(1deg); }
  45%  { transform: translateX(-2px) rotate(-0.5deg); }
  60%  { transform: translateX(1px) rotate(0.5deg); }
  75%  { transform: translateX(-1px); }
  100% { transform: translateX(0) rotate(0); }
}

.cta {
  display: inline-block; /* wichtig für transform */
  transition: transform 0.3s ease;
}

.cta:hover {
  animation: wobble-cta 0.6s ease;
}


/*-----------------------------COLLAGE----------------------*/
.collage-wrapper {
  position: relative;
  width: 534px;
  height: 809px;
  margin: 0 auto;
  overflow: hidden;
top: -541px;
  right: -16%;
}


.collage-wrapper2 {
 
position: absolute;
  width: 35%;

  overflow: hidden;
  top: 273px;
  left: -92px;
  aspect-ratio: 1;
}


.collage-wrapper img.layer, 
.collage-wrapper2 img.layer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  transition: transform 0.2s ease;
  pointer-events: none;
	padding: 20px;

}


/*-----------------------------TEXT-BLÖCKE---------------------*/
.text-block1 {
width: 100%;
  padding: 3% 3%;
  max-width: 1410px;
  margin: 0 auto;
	text-align:center;
}

.text-block2 {
  width: 100%;
  padding: 3% 3% 1.5% 3%;
  max-width: 1410px;
  margin: 0 auto;
  text-align: center;
	
}

.text-block a{ color: var(--wws-tuerkis);}
.text-block p{  color: var(--wws-dunkelgruen);}


.text-block p, .text-block a{
  font-size: 32px;
  font-family: Source Sans Pro;
  font-weight: 600;
  letter-spacing: 0.020em;
  line-height: 143%;
 text-decoration: none;

	transition:0.1s;
}

.text-block a:hover{
color: var(--wws-dunkelrot);
}


.text-block strong {
  font-family: Misrow;
  font-weight: normal;
  font-size: 36px;
  letter-spacing: 1.7px;
}

/*-----------------------------TEXT-BLÖCKE2---------------------*/
.text-block h4 {
  font-size: 43px;
  margin-top: 50px;
  letter-spacing: 3px;
  font-weight: normal;
  margin-bottom: 0px;
}

.text-block h4 + p {
margin-top: 13px;
  margin-bottom: 0px
}

/*-------------------------------Textblock-alternativ--------------------------*/

.text-block-alternativ {
 display: flex;
  flex-wrap: wrap;
  gap: 3%;
  padding: 20px;
}

.box1, .box2 {
  flex: 1 1 calc(50% - 1.5%); /* 24px gap → jede Box kriegt die Hälfte minus halbes gap */
  aspect-ratio: 3 / 2;
  display: flex;
    position: relative; /* NEU */
}
	


/* Untereinander ab 767px */
@media (max-width: 767px) {
  .box1, .box2 {
    flex: 1 1 100%;
  }
}


.text-block-alternativ strong {
  font-family: Misrow;
  font-weight: normal;
  font-size: 36px;
  letter-spacing: 1.7px;
}

.box2 strong{color:var(--wws-violett);}
.box1 strong{color:white;}

.box1 {	background-image:url('/wp-content/uploads/images/FormBox1.png');background-size:100% 100%;transition: 0.3s ease;background-position: 100% 100%;}
.box2 {	background-image:url('/wp-content/uploads/images/FormBox2.png');background-size:100% 100%;transition: 0.3s ease;}
.box1:hover { background-size:105% 105%;}
.box2:hover {background-size:105% 105%;}

.box1 img {
  width: 34%;
  height: auto;
  position: absolute;
  z-index: 1;
  pointer-events: none;
	left: 47%;
  top: 51%;
  transition: transform 0.3s ease;
}

.box2 img {
  width: 34%;
  height: auto;
  position: absolute;
  z-index: 1;
  pointer-events: none;
  left: 12%;
  top: 29%;
		  transition: transform 0.3s ease;
}

.box1 strong{
position: absolute;
  left: 51%;
  top: 54%;
  font-family: Misrow;
  font-weight: normal;
  font-size: 2.1vw;
  letter-spacing: 0.06em;
  z-index: 2;
  line-height: 131%;
	  transition: transform 0.3s ease;
}

.box2 strong {
position: absolute;
  left: 16%;
  top: 32%;
  font-family: Misrow;
  font-weight: normal;
  font-size: 1.875vw;
  letter-spacing: 0.06em;
  z-index: 2;
  line-height: 131%;
	  transition: transform 0.3s ease;
}

.box1:hover strong {
  transform-origin: 80% 80%;
  transform: scale(1.5);
}
.box1:hover img {
  transform-origin: 80% 80%;
  transform: scale(1.5);
}

.box2:hover strong {
  transform-origin: 20% 20%;
  transform: scale(1.5);
}
.box2:hover img {
  transform-origin: 20% 20%;
  transform: scale(1.5);
}


/*-----------------------YOUTUBE--------------*/
.video-block-wrapper {
  position: relative;
}

.youtube-play-button {
  cursor: pointer;
}

.youtube-lazy-container {
  margin: 0 auto;
  width: 60%;
  max-width: 826px;
	position:relative; 
	cursor:pointer; 
	margin-bottom: 85px;
}

.youtube-lazy-thumb {
  position: relative;
  padding-top: 56.25%; /* 16:9 Verhältnis */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 0;
  overflow: hidden;
}

.youtube-lazy-thumb iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.youtube-lazy-thumb .disclaimer {
  position: absolute;
  color: white;
  bottom: 0;
  width: 100%;
  text-align: center;
  background: var(--wws-dunkelrot);
  margin: 0px;
  font-size: 18px;
  padding: 2%;
	  transition: opacity 0.3s ease;
	opacity:0;

}

.youtube-lazy-thumb p.disclaimer:hover{
opacity:1;
pointer-events:initial;	
} 

.youtube-lazy-thumb:hover p.disclaimer{
opacity:1;
pointer-events:none;	
} 

p.infotext{
	font-size: 25px;
  font-weight: 600;
  margin: 13px 0px;
}



/*----------Responsiv ----------*/


@media (max-width: 575.98px) {
	.erbse2-wrapper{position: relative;  height: 230px;display:block!important;}
	.cta-erbse1 {display:none;}
	.cta-erbse2 {display:inline-block!important;position:absolute!important;top:0!important;margin-bottom: 13vw;}
	.cta.cta-erbse {  top: 490vw;    width: 270px; }
	.cta-erbse img {  top: 33px;width: 124px;left: 55px;}
	#page-header {  margin-top: 84vw;    height: 66vw;    margin-bottom: 3vw;}
	.page-header-text {width: 81vw;    margin-left: 10vw;    height: 39vw;    top: 20vw;    padding: 2vw 0vw 1vw 5vw; position: relative;}
	.page-header-text h1 {  font-size: 9vw;}
	.page-header-text h2 {  font-size: 5vw;    letter-spacing: 0.5vw;}
	.collage-wrapper {width: 90vw;    height: 110vw;    top: -90vw;    right: -20vw;}
	.collage-wrapper img:first-child {display:none;}
.collage-wrapper2 {   width: 65%;   top: -507px;  left: -52px;}		
	.text-block p, .text-block a, .text-block strong { font-size: 20px;}
		.text-block h4 {font-size: 34px;}
		.text-block1 {margin-bottom: 0vw;}
		.text-block2 {margin-top: 125px;}
	.youtube-lazy-container {  width: 85%;}
		.cta.cta-insta {display:none;}
	.cta.cta-insta-mobile { display: inline-block;    width: 44%;    top: 75px;       position: relative;    left: 50%;}
	p.infotext {  font-size: 24px;	}
	.box1 strong {  left: 42%;  top: 46%;   font-size: 6.1vw;}	
	.box1 img {  width: 54%;  left: 37%;  top: 41%;}
	.box2 strong {  left: 11%;  top: 44%;   font-size: 6.1vw;}	
	.box2 img {  width: 54%;  left: 6%;  top: 41%;}
	.text-block-alternativ{gap:30px;}
	

	
}


@media (min-width: 576px) and (max-width: 767.98px) {
	
	.cta.cta-erbse {  top: 90px;  width: 270px; }
	.cta-erbse img {  top: 33px;width: 124px;left: 55px;}

	
		#page-header {  margin-top: 72vw;    height: 46vw;    margin-bottom: 3vw;}
	.page-header-text {width: 66vw;    margin-left: 7vw;    height: 30vw;    top: 12vw;   padding: 2vw 0vw 1vw 5vw; position: relative;}
	.page-header-text h1 {  font-size: 6.4vw;}
	.page-header-text h2 {  font-size: 4vw;    letter-spacing: 0.45vw;}
	.collage-wrapper {width: 90vw;    height: 78vw;    top: -62vw;    right: -42vw;}
	
	.collage-wrapper2 {   width: 55%;   top: -557px;  left: -52px;}	
	.text-block p, .text-block a, .text-block strong { font-size: 24px;}
	.text-block h4 {font-size: 34px;}
	
	.text-block2 {margin-top: 130px;}
	.youtube-lazy-container {  width: 85%;}
	.cta.cta-insta {display:none;}
	.cta.cta-insta-mobile { display: inline-block;    width: 34%;    top: 75px;       position: relative;    left: 64%;}
	p.infotext {  font-size: 24px;	}
	.box1 strong {  left: 42%;  top: 46%;   font-size: 6.1vw;}	
	.box1 img {  width: 54%;  left: 37%;  top: 41%;}
		.box2 strong {  left: 11%;  top: 44%;   font-size: 6.1vw;}	
	.box2 img {  width: 54%;  left: 6%;  top: 41%;}
	.text-block-alternativ{gap:30px;}
		 
}

@media (min-width: 768px) and (max-width: 991.98px) {
	.cta.cta-erbse {  top: 90px;  width: 270px; }
	.cta-erbse img {  top: 33px;width: 124px;left: 55px;}

	#page-header {  margin-top: 418px;height: 350px;}
	.page-header-text { width: 506px;    margin-left: 10.5%;    height: 225px;    top: 59px;}
	.page-header-text h1 {  font-size: 49px;}
	.page-header-text h2 {  font-size: 36px;}
	.collage-wrapper { width: 470px;    height:545px;    top: -373px;   right: -30%;}
	
		.text-block p, .text-block a, .text-block strong { font-size: 28px;}
	  .text-block h4 {font-size: 38px;}
	.cta-insta-mobile{display:none!important;}
	.box1 strong {  left: 42%;  top: 46%;   font-size: 3.1vw;}	
	.box1 img {  width: 54%;  left: 37%;  top: 41%;}
		.box2 strong {  left: 10%;  top: 43%;   font-size: 3.1vw;}	
	.box2 img {  width: 54%;  left: 6%;  top: 41%;}
}


@media (min-width: 992px) and (max-width: 1199.98px) {
/*
	.cta.cta-erbse {  top: 200px;  width: 270px;}
	#page-header {  margin-top: 418px;height: 430px;}
	.page-header-text { width: 586px;    margin-left: 13.5%;    height: 261px;}
	.page-header-text h1 {  font-size: 56px;}
	.page-header-text h2 {  font-size: 43px;}
	.collage-wrapper {  width: 534px;  height: 642px;    top: -417px;    right: -17%;}	
	*/
	.cta.cta-erbse {  top: 13vw; width: 20vw;}
	.cta-erbse img {  width: 11vw;    left: 2vw;    top: 3vw;}
	.cta-erbse h4:nth-of-type(2) {  font-size: 1.7vw;}

	#page-header { margin-top: 35vw;    height: 22vw;}
	.page-header-text {  width: 38vw;  height: 17vw;top: 2vw;padding: 15px 2px 11px 28px;}
	.page-header-text h1 {  font-size: 3.6vw;}
	.page-header-text h2 {  font-size: 2.7vw;}
	/*.collage-wrapper {  width: 534px;  height: 642px;    top: -408px;    right: -16%;} */
	.collage-wrapper {   width: 32vw;  height: 42vw;right: -17vw;top:-33vw;}
	
	
	
	
	.cta-insta-mobile{display:none!important;}
	.box1 strong {  left: 42%;  top: 46%;   font-size: 3.1vw;}
	.box1 img {  width: 54%;  left: 37%;  top: 41%;}
			.box2 strong {  left: 10%;  top: 43%;   font-size: 3.1vw;}	
	.box2 img {  width: 54%;  left: 6%;  top: 41%;}
	
}


@media (min-width: 1200px) and (max-width: 1399.98px) {
	.cta.cta-erbse {  top: 13vw; width: 20vw;}
	.cta-erbse img {  width: 12vw;left: 3vw;}
	.cta-erbse h4:nth-of-type(2) {  font-size: 1.8vw;}

	#page-header { margin-top: 30vw;    height: 22vw;}
	.page-header-text {  width: 37vw;  height: 17vw;top: 2vw;}
	.page-header-text h1 {  font-size: 3.6vw;}
	.page-header-text h2 {  font-size: 2.7vw;}
	/*.collage-wrapper {  width: 534px;  height: 642px;    top: -408px;    right: -16%;} */
	.collage-wrapper {   width: 32vw;  height: 42vw;right: -17vw;top:-33vw;}
	.cta-insta-mobile{display:none!important;}
	
}

@media (min-width: 1400px)  {
	
.cta-insta-mobile{display:none!important;}	
	
body.home .logo {width: 16vw;   left: 10vw;	}
.collage-wrapper {   width: 32vw;  height: 42vw;right: -17vw;top:-33vw;}
	#page-header {  height: 22vw;}
	.page-header-text {  width: 37vw;  height: 17vw;top: 2vw;}
	.page-header-text h1 {  font-size: 3.6vw;}
	.page-header-text h2 {  font-size: 2.7vw;}
}






@media  (pointer: coarse) and (max-width: 991px) {
	.youtube-lazy-thumb .disclaimer {opacity:1;font-size: 11px; padding: 1%;}
	.box1,.box2,.text-block-alternativ * { transform: none !important;}
	.box2:hover,.box1:hover {  background-size: 100% 100%;}

}

/*----temp----*/
.video-block {  display: none;}
.text-block.text-block2 {  display: none;}
.collage-wrapper2 {  display: none;}
.video-block-wrapper {   height: 17vw;}
@media (min-width: 768px) {.cta.cta-insta {width: 18%;  top: 20%;}}


/*----temp ENDE----*/