#primary{margin-top:0px}
/*------------------------INFO-BOXEN------------------------*/

.acf-sus-boxen-wrapper {
  display: flex;
  gap: 4%;
  margin: 2rem 0;
  align-items: stretch;
  padding: 20px 6%;
}

.acf-sus-box {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2%;
  transition: transform 0.2s ease;
}

.acf-sus-box h4 {
  font-family: "Misrow", sans-serif;
  letter-spacing: 0.056em;
  font-weight: normal;
  font-size: 2vw;
  line-height: 103%;

  transition: transform 0.2s ease;
  margin: 11% 0% 14% 1%;
  width: 38%;
  padding: 28px 35px;
}

.acf-sus-boxen-wrapper a {
  text-decoration: none;
  color: white;
  margin-right: 2px;
}

.acf-sus-box p {
  font-size: 1.3vw;
  font-weight: 600;
  color: var(--wws-dunkelgruen);
  padding: 0px 8%;
  line-height: 131%;
  margin: -3% 0 6% 0;
}

.acf-sus-boxen-wrapper strong {
  font-family: Misrow;
  font-weight: normal;
  padding: 0px 6px;
  font-size: 1.5vw;
  letter-spacing: 1.7px;
  background-color: white;
}

.box1 {
  background-image: url("/wp-content/uploads/images/sus-box1.png");
  background-size: 100% 100%;
  transition: 0.3s ease;
}
.box2 {
  background-image: url("/wp-content/uploads/images/sus-box2.png");
  background-size: 100% 100%;
  transition: 0.3s ease;
}

.box1 h4 {
  background-image: url("/wp-content/uploads/images/sus-box-h4-1.png");
  background-size: 100% 100%;
  color: white;
}
.box2 h4 {
  background-image: url("/wp-content/uploads/images/sus-box-h4-2.png");
  background-size: 100% 100%;
  color: var(--wws-violett);
}

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

.acf-sus-box img {
  position: absolute;
}

.box1 img {
  width: 42%;
  right: 9%;
}
.box2 img {
  width: 48%;
  right: 9%;
}

.acf-sus-boxen-wrapper strong:hover {
  transform: scale(1.2);
}

.acf-sus-box:hover {
  transform: scale(1.01);
}
.acf-sus-box:hover h4 {
  transform: scale(1.06);
}

@media (max-width: 700px) {
  .acf-sus-boxen-wrapper {
    flex-direction: column;
  }
}

/*------------------------PAGE HEADER------------------------*/
#page-header {
  background-size: 100% 100%;
  background-color: var(--wws-hellgruen);
  height: 200px;
  margin-top: 458px;
  position: relative;
}

.page-header-text {
  background-image: url("/wp-content/uploads/images/sus-bg1.png");
  position: relative;
  background-size: 100% 100%;
  width: 33vw;
  padding: 23px 3px 11px 34px;
  z-index: 15;
  margin-left: 46.4%;
  top: -1vw;
  height: 13.7vw;
}

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

.page-header-text h2 {
  font-size: 3.4vw;
  letter-spacing: 1px;
  color: white;
  margin: 1px;
  line-height: 100%;
}
/*-----------------------------BILD-GALLERIE----------------------*/

.acf-sus-bild {
  position: relative;
  width: 75%;
  padding: 0% 3% 3% 3%;

  text-align: left;
  margin-top: 0;
  margin-left: 3%;
  margin-bottom: 3%;
  max-width: 1125px;
}

/*-----------------------------COLLAGE----------------------*/
.collage-wrapper2 {
  position: absolute;
  width: 505px;
  overflow: hidden;
  top: 1153px;

  right: -130px;
  aspect-ratio: 432/514;
}
.collage-wrapper {
  position: absolute;
  width: 708px;
  overflow: hidden;
  top: -133%;
  left: 13%;
  aspect-ratio: 834 / 684;
}

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

/*------------------------CTA 1------------------------*/

.cta.cta-insta {
  position: absolute;
  right: 1%;
  width: 296px;
  top: 950px;
}

.termine-wrapper {
  height: 4px;
  position: relative;
  width: 100%;
}

.cta.cta-fortbildung {
  display: none; /*-----------------------------DEAKTIVIERT INFOBOX WETTBEWERB-------------------*/
  position: absolute;
  top: 155px;
  width: 520px;
  right: 1%;
  height: 422px;
}

.cta-fortbildung img {
  width: 166px;
  z-index: 20;
  position: absolute;
  right: 67px;
  top: 0;
}

.cta-fortbildung .termine {
  color: var(--wws-dunkelrot);
  position: absolute;
  right: 0%;
  top: 126px;
  font-size: 33px;
  background-color: var(--wws-gelb);
  padding: 0px 24px 20px 25px;
  line-height: 111%;
  margin: 0;
  font-weight: 200;
  z-index: 19;
  font-family: misrow;
  text-align: right;
  clip-path: polygon(
    0.39% 23.5%,
    43.55% 23%,
    43.53% 0.15%,
    100% 0%,
    100% 100%,
    53.36% 99.91%,
    52.73% 60.03%,
    1% 58.46%
  );
  letter-spacing: 0.04em;
}

.cta-fortbildung .termine strong {
  font-size: 36px;
  display: block;
  margin: 15px 0 -13px 0;
}

.cta-fortbildung .termine p {
  margin-bottom: 10px;
}

.cta-fortbildung h4.mehrinfos {
  color: white;
  position: absolute;
  right: 3%;
  top: 360px;
  font-size: 29px;
  background-color: var(--wws-dunkelrot);
  padding: 6px 10px 5px 14px;
  line-height: 106%;
  margin: 0;
  font-weight: normal;
  z-index: 19;
  text-align: right;
}

/*------------------------CTA------------------------*/
a.cta {text-decoration: none;}

.cta.cta-mail-m {
	display:none;
position: relative;
  width: fit-content;
  flex-direction: column;
  align-items: flex-end;
  margin: 0 auto;
margin-top: 81px;
  margin-bottom: 110px;
}

.cta.cta-mail {
  position:absolute;
  top: 226px;
  width: 410px;
  right: 1%;
 display: flex;
  flex-direction: column;
  align-items: flex-end; /* rechtsbündig */
}

.cta-mail-m img,.cta-mail img {
  width: 27px;
  z-index: 20;
  margin-right: 7px;
}


.cta h4.highlight1 {
  color: var(--wws-dunkelrot);
  font-size: 26px;
  background-color: var(--wws-gelb);
  line-height: 100%;
  margin: 0;
  font-weight: normal;
  z-index: 19;
  text-align: right;
	display:inline;
	padding: 16px 17px;
	margin-bottom: -11px;
}

.cta h4.highlight2 {
  color: white;
  font-size: 26px;
  line-height: 108%;
  background-color: var(--wws-dunkelrot);
  display:inline;
  margin: 0;
  font-weight: normal;
  z-index: 19;
  letter-spacing: 2px;
  text-align: right;
	padding: 4px 13px;
  border: solid 1px var(--wws-dunkelrot)aliceblue;
  margin-right: 24px;
	margin-bottom: -1px;
}

@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;
}

/*-----------------------------TEXT-BLÖCKE---------------------*/
.text-block1 {
  position: relative;
  width: 75%;
  padding: 3% 5%;
  max-width: 1363px;

  text-align: left;
  margin-top: 100px;
  margin-left: 3%;
}

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

.text-block p,
.text-block a {
  font-size: 28px;
  font-family: Source Sans Pro;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 143%;
  text-decoration: none;
  color: var(--wws-dunkelgruen);
  transition: 0.1s;
}

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

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

/*-----------------------------TEXT-BLÖCKE2---------------------*/
.text-block h4 {
	line-height: 133%;
  font-size: 36px;
  margin-top: 59px;
  margin-left: -4%;
  letter-spacing: 3px;
  font-weight: normal;
  margin-bottom: 1px;
  display: inline-block;
  background-color: var(--wws-dunkelgruen);
  padding: 17px 19px;
  color: white;
  clip-path: polygon(
    0.6% 13%,
    4.7% 13%,
    4.7% 0%,
    58.8% 0%,
    58.8% 13%,
    98.8% 13%,
    98.8% 95%,
    59% 95%,
    59% 102%,
    5.5% 102%,
    5.5% 90%,
    0.6% 90%
  );
}

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




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


@media (max-width: 575.98px) {
		#primary {  margin-top: 100px;}
	#page-header { height: 125px;margin-top: 38vh;}
		.page-header-text { width: 81vw;    height: 32vw;    padding: 2.4% 0px 0 4%;    margin-left: 13%;    top: 1vw;}
	.page-header-text h2 { font-size: 8vw;}
	.page-header-text h1 { font-size: 11vw;}
	.collage-wrapper {  width: 485px;    margin-left: -150px;    top: -188%;}
	
	.text-block p, .text-block a, .text-block strong { font-size: 24px;}
		.text-block h4 {font-size: 26px;padding: 34px 19px;}
		.text-block2 {margin-top: 125px;}
	.text-block {width:100%;margin: 10% 0;margin-bottom: 1%;}
	
	.cta.cta-mail-m{display:flex;}
	.cta.cta-mail{display:none}
	.collage-wrapper2 {display:none;}
		
	.termine-wrapper {  width: 62%;  top: 6vh;}
	.cta-fortbildung .termine strong {  font-size: 5.4vw;margin: 7px 0;}
	.cta-fortbildung .termine p {  font-size: 4vw;}
	.cta-fortbildung h4.mehrinfos  {  font-size: 4vw;margin-left: 45%;}
	.cta-fortbildung .termine {  padding: 3% 4% 3% 4%;}
	
	.acf-sus-bild {  width: 96%;    margin-left: 2%;    margin-right: 2%; }
	
	.acf-sus-box {  flex: 1 0 100%;  margin-bottom: 8%;}
	.acf-sus-boxen-wrapper{flex-wrap: wrap;    width: 100%;    padding: 0 8%;    margin-left: 0%;}
	.acf-sus-box h4 { font-size: 5.5vw;    padding: 5% 4% 6% 6%;    width: 52%;}
	.acf-sus-box p {  font-size: 4vw;	margin: -8% 0 9% 0;}
	.acf-sus-box strong {  font-size: 4.5vw;	}
	.box2 img,.box1 img {  width: 33%;  right: 9%;  top: 9%;}
	.box1  {margin-bottom: 8%;}
	
	
		.cta.cta-mail-m h4{font-size:3.5vw;}
	.collage-wrapper img:nth-child(2) {  display: none;}
}


@media (min-width: 576px) and (max-width: 767.98px) {
		#primary {  margin-top: 100px;}
	#page-header { height: 150px; margin-top: 50%;}
		.page-header-text {  width: 50vw;    height: 20vw;    padding: 1.4% 0px 0 3%;}
	.page-header-text h2 { font-size: 5vw;}
	.page-header-text h1 { font-size: 7vw;}
	.collage-wrapper { width: 432px;    left: -6%;    top: -118%;}
	
	
	.text-block p, .text-block a, .text-block strong { font-size: 24px;}
	.text-block h4 {font-size: 26px;padding: 34px 19px;}
	.text-block {width: 93%;margin: 10% 3%;margin-bottom: 1%;}
	
	.cta.cta-mail-m{display:flex;}
	.cta.cta-mail{display:none}
	.collage-wrapper2 {display:none;}
	
	.termine-wrapper {  width: 42%;  top: 1%;}
	.cta-fortbildung .termine strong {  font-size: 3.4vw;margin: 7px 0;}
	.cta-fortbildung .termine p {  font-size: 3vw;}
	.cta-fortbildung h4.mehrinfos  {  font-size: 3vw;margin-left: 45%;}
	.cta-fortbildung .termine {  padding: 3% 4% 3% 4%;}
	
	.acf-sus-bild {  width: 90%;   margin-left: 5%;   margin-right: 5%; }
	
	.acf-sus-box {  flex: 1 0 100%;  margin-bottom: 3%;}
	.acf-sus-boxen-wrapper{flex-wrap: wrap;    width: 100%;    padding: 0 8%;    margin-left: 0%;}
	.acf-sus-box h4 { font-size: 5.5vw;    padding: 5% 4% 6% 6%;    width: 52%;}
	.acf-sus-box p {  font-size: 3.4vw;	margin: -8% 0 9% 0;}
	.acf-sus-box strong {  font-size: 4vw;	}
	.box2 img,.box1 img {  width: 33%;  right: 9%;  top: 9%;}
	.box1  {margin-bottom: 8%;}
	
	.cta.cta-mail-m h4{font-size:3.5vw;}
		 
}

@media (min-width: 768px) and (max-width: 991.98px) {
	#primary {  margin-top: 100px;}
	#page-header{margin-top:35%}
		.page-header-text {  width: 50vw;    height: 20vw;    padding: 1.4% 0px 0 3%;}
	.page-header-text h2 { font-size: 5vw;}
	.page-header-text h1 { font-size: 7vw;}
	.collage-wrapper {  width: 581px;    left: -4%;    top: -94%;}
	
	  .text-block p, .text-block a, .text-block strong { font-size: 28px;}
	  .text-block h4 {font-size: 36px;padding: 34px 19px;}
	.text-block {width: 93%;margin: 10% 3%;margin-bottom: 1%;}
	
	.cta.cta-mail-m{display:flex;}
	.cta.cta-mail{display:none}
	.collage-wrapper2 {display:none;}
	
	.termine-wrapper {  width: 32%;  top: 1%;}
	.cta-fortbildung .termine strong {  font-size: 2.6vw;}
	.cta-fortbildung .termine p {  font-size: 2.3vw;}
	.cta-fortbildung h4.mehrinfos  {  font-size: 2.3vw;margin-left: 45%;}
	
	.acf-sus-bild {  width: 90%;   margin-left: 5%;   margin-right: 5%; }
	
	.acf-sus-box {  flex: 1 0 44%;  margin-bottom: 3%;}
	.acf-sus-boxen-wrapper{flex-wrap: wrap;    width: 100%;    padding: 0 5%;    margin-left: 0%;}
	.acf-sus-box h4 {  font-size: 3vw;    width: 92%;  margin: 1% 0% 14% 1%;    padding: 15px 33px; }
	.acf-sus-box p { font-size: 1.8vw;    margin-top: 18%;}
	.acf-sus-box strong {  font-size: 2.2vw;	}
	.acf-sus-box:nth-child(3) { flex: 0 0 50%; margin: 2% auto 0 auto;}
	.box2 img { width: 40%;    top: 114px;    left: 29%;}
	.box1 img { width: 40%;    top: 82px;    left: 39%;}
	.cta.cta-mail-m h4{font-size:2.5vw;}
}


@media (min-width: 992px) and (max-width: 1199.98px) {
	#page-header{height: 178px;margin-top:47%}
	.page-header-text {  width: 42vw;    height: 18vw;    padding: 1.4% 0 0 2%;}
	.page-header-text h2 { font-size: 4.4vw;}
	.page-header-text h1 { font-size: 6vw;}
	.collage-wrapper {   left: 3%;width: 618px;}
  .text-block p, .text-block a, .text-block strong { font-size: 28px;}
	  .text-block h4 {font-size: 30px;}
	
		.collage-wrapper2 {  width: 40%;}

.acf-lehr-box {  flex: 1 0 44%;  margin-bottom: 3%;}
	.acf-sus-boxen-wrapper{flex-wrap: wrap;    width: 100%;    padding: 14px 5%;    margin-left: 0%;    margin-right: 0%;}
	.acf-sus-box h4 {  font-size: 2vw;	}
	.acf-sus-box p {  font-size: 1.8vw;	}
	.acf-sus-box strong {  font-size: 2.2vw;	}
	.acf-sus-box:nth-child(3) { flex: 0 0 50%; margin: 2% auto 0 auto;}
}


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

	.collage-wrapper {   left: 2%;width: 698px;}
	.collage-wrapper2 {  width: 35%;}
	.page-header-text {width: 542px;  padding: 17px 3px 11px 34px;  height: 221px;}
		.page-header-text h2 { font-size: 54px;}
	.page-header-text h1 { font-size: 76px;}
	
	}

@media (min-width: 1400px)  {
	
}


@media  (pointer: coarse) and (max-width: 991px) {
	.box1,.box2,.text-block-alternativ * { transform: none !important;}
	.box2:hover,.box1:hover {  background-size: 100% 100%;}

}

/* Korrekturen */
.startseite-content {  overflow: hidden;position: relative;}