/*-----------------------LOAD MORE------------------------*/

.button-wrapper {
  display: flex;
  justify-content: flex-end;
  margin-top: 57px;
}

#load-more {
  border: none;
  background-color: white;
  font-family: misrow;
  font-size: 1.5vw;
  letter-spacing: 0.035em;
	padding: 0 0;
		transition: transform 0.2s ease;
	  transform-origin: right center;
	cursor: pointer;
}
#load-more:hover{ animation: wobble 0.6s ease both;}

#load-more span {
	 font-family: misrow;
  font-size: 1.5vw;
  letter-spacing: 0.035em;
  margin-right: 7px;
  color: white;
  background-color: var(--wws-dunkelgruen);
  padding: 0px 10px;
}

/*-----------------------POST LIST------------------------*/
#custom-post-container a {
  text-decoration: navajowhite;
  color: var(--wws-dunkelgruen);
	transition: transform 0.3s ease;
	  transform-origin: right center;
}
#custom-post-container a:hover .post-title{
  animation: wobble 0.6s ease both;
}

@keyframes wobble {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(-1deg); }
  50%  { transform: rotate(1deg); }
  75%  { transform: rotate(-0.5deg); }
  100% { transform: rotate(0deg); }
}




.post-title {
padding-top: 3%;
  padding-left: 7%;
}

.post-title p {
  font-size: 1.5vw;
  font-weight: 600;
  margin: 0;
  padding-right: 31%;
  line-height: 125%;
  padding-left: 20px;
}

.post-title h3 {
  color: var(--wws-dunkelgruen);
  font-size: 2vw;
  background-color: white;
  display: inline-block;
  padding: 7px 21px;
  clip-path: polygon(0px 3px, 98.98% 3px, 98.14% 94.98%, 0.19% 92.59%);
	margin-bottom: 5px;
	line-height: 112%;
}

.title-and-link {
  position: relative;
}



.posts-wrapper {
  margin-top: 8%;
  width: 90%;
  max-width: 1420px;
  margin-left: 6%;
  margin-bottom: 50px;
}

.post-grid {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.post-row {
  display: grid;
  grid-template-columns: 28% auto;
 
  gap: 0rem;
height: 16vw;
  background-color: var(--wws-rosa);
overflow:hidden;	
}
.post-image {height:100%;}
.post-image img {
width: 100%;
  height: 100%;
  object-fit: cover;
}
.post-link:hover{ transform:scale(1.05);}
.post-link { 
transition:0.2s ease;	
text-decoration: none!important;
  color: white!important;
  position:relative;
  font-family: misrow;
  font-size: 1.5vw;
  background-color: var(--wws-dunkelgruen);
  padding: 1px 14px;
  letter-spacing: 1.5px;
	display:inline-block;

}

.post-link {
text-align: right;
  position: absolute;
  bottom: 12%;
  right: 6%;
}

/*------------------------PAGE HEADER------------------------*/
#page-header {

  background-size: 100% 100%;
  background-color: var(--wws-hellgruen);
height: 200px;
  margin-top: 407px;
position:relative;
 	
}

.page-header-text {
background-image: url('/wp-content/uploads/images/aktuelles-bg1.png');
 
  position: relative;
  background-size: 100% 100%;
  width: 397px;
  padding: 31px 2px 11px 31px;
  z-index: 15;
  margin-left: 47.5%;
  top: -31px;
  height: 130px;
}

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

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

/*-----------------------------COLLAGE----------------------*/


.collage-wrapper {
position: absolute;
  width: 443px;
  overflow: hidden;
  top: -107%;
  left: 27%;
  aspect-ratio: 1;
}


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



/*----------Responsiv MENÜ ----------*/


@media (max-width: 575.98px) {
	


	#page-header {height: 140px;  margin-top: 331px;}
	.page-header-text {width: 230px;    margin-left: auto;    top: 17px;    height: 67%;    padding: 25px 2px 11px 12px;    margin-right: 2%;}
	.page-header-text h1 {  font-size: 50px;}
	.collage-wrapper { left: 2%;    width: 296px;    top: -96%;}	
	
		
	.post-title h3 {   font-size: 23px; margin-top: 2px;}
	#load-more span,#load-more,.post-title p, .post-link {  font-size: 18px }
	  .post-row {  display: flex;  flex-direction: column;  gap: 0rem;  height: auto;  }
	.post-image {  height: 60%;}
	.post-title { padding: 3% 3%;}
	.post-grid {gap: 3rem;}
	.title-and-link {  height: auto;    margin-bottom: 35px;}
	.post-link {  bottom: -24px;  right: 4%;}
}


@media (min-width: 576px) and (max-width: 767.98px) {

	.page-header-text {width: 287px;    margin-left: 43.5%;    top: 29px;    height: 109px;}
	.page-header-text h1 {  font-size: 56px;}
	.collage-wrapper { left: 10%;    width: 356px;    top: -67%;}	
	
	.post-title h3 {   font-size: 3vw; }
	#load-more span,#load-more,.post-title p, .post-link {  font-size: 2.6vw }
	.post-row { grid-template-columns: 34% auto;   height: 29vw;}
	.post-grid {gap: 3rem;}
		 
}

@media (min-width: 768px) and (max-width: 991.98px) {
	.page-header-text {width: 357px;     margin-left: 43.5%;  top: -31px;  height: 119px;}
	.page-header-text h1 {  font-size: 74px;}
	.collage-wrapper {  left: 17%;  width: 393px;  top: -77%;}	
	
	.post-title h3 {   font-size: 2.8vw; }
	#load-more span,#load-more,.post-title p, .post-link {  font-size: 2.1vw }
	.post-row { grid-template-columns: 31% auto;   height: 25vw;}
	.post-grid {gap: 3rem;}
}


@media (min-width: 992px) and (max-width: 1199.98px) {
	.collage-wrapper {  left: 14%;}
	
	.post-title h3 {   font-size: 2.3vw; }
	#load-more span,#load-more,.post-title p, .post-link {  font-size: 1.8vw }
	.post-row { grid-template-columns: 31% auto;   height: 21vw;}
		
}


@media (min-width: 1200px) and (max-width: 1399.98px) {

	.collage-wrapper {  left: 17%;}
}

@media (min-width: 1400px)  {
	

}


@media  (pointer: coarse) and (max-width: 991px) {


}