:root {
  --eesgGreen: rgb(0, 167, 157);
  --eesgLightGreen: rgb(215, 233, 59);
  --eesgDarkGreen: rgb(0, 113, 106);
  --eesgYellow: rgb(255, 182, 18);
  --eesgWhite: rgb(255, 255, 255);
}

body,
#page,
#content{
	background-color:rgba(240, 245, 240, 1);
}

.eesg-intro-header .wp-block-column:last-child {
	text-align:right;
}
.eesg-intro-header .wp-block-column:last-child .wp-block-buttons {
	padding-top:9px;
}
.eesg-intro-block {
	background-color:white;
	border-radius:20px;
	box-sizing:border-box;
	padding:30px;
}
.eesg-intro-footer {
	font-size:16px;
	line-height:22px;
	font-style:italic;
}

/* Buttons */

.sc-evoke-tour,
.sc-back-to-eesg {
  position: fixed;
  right: -2px;
  top: 240px;
  width:140px;
  border-radius: 5px 0px 0px 5px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  padding: 20px;
  box-sizing: border-box;
  cursor: pointer;
  z-index: 1;
  display:block;
  color: rgb(0, 113, 106);
  text-decoration:none;
}
.sc-back-to-eesg {
	right:initial;
	left:-2px;
}
.entry-content .sc-back-to-eesg:hover {
  color: rgb(0, 113, 106);
  text-decoration:none;
}
.sc-evoke-tour .small,
.sc-back-to-eesg .small {
	display:none;
	transform: rotate(270deg);
	position:absolute;
	width: 90px;
	transform-origin: 45px 43px;
}


/* Tour */
.sc-intro-tour {

	position:relative;
}



.sc-intro-tour-content {

  background-color: rgb(255, 255, 255);
	border-radius:20px;
  	overflow:hidden;

  	padding:110px 50px 110px 40px;
  	margin-bottom:30px;
  	box-sizing:border-box;
}

.sc-tour-headline {
	position:absolute;
	top:30px;
	left:40px;
	font-size:24px;
	font-weight:700;
}
.sc-skip-button {
	position:absolute;
	top:30px;
	right:50px;
	line-height:16px;
	font-size:20px;
}
.sc-start-button {
	line-height:16px;
	font-size:20px;
}
.sc-start-button.position {
	position:absolute;
	bottom:40px;
	right:50px;
}
.sc-start-button svg {
	display:inline-block;
	height:20px;
	width:auto;
	margin:0 10px 0px -10px;
	vertical-align:middle;
}





.sc-start-button svg .hand {
    animation: move 2s ease-in-out infinite;
    transform-box: fill-box;
}

@keyframes move {
	0%   { transform: translate(0,0); }
	50%  { transform: translate(-20px, -30px); } /* nach unten */
	100% { transform: translate(0,0); } /* zurück */
}




.eesg-tour {
	background-color:rgba(215, 233, 59,0.4);
	margin-top:0;
	margin-bottom:25px;
	margin-left:0;
	margin-right:180px;
	padding:10px;
	box-sizing:border-box;
	cursor:pointer;
}
.eesg-tour h3 {
	background-color:rgb(215, 233, 59);
	color:white;
	font-size:24px;
	position:relative;
	line-height:50px;
	margin:-35px 17px 10px -10px;
	padding-left:10px;
}
.eesg-tour p {
 margin-bottom:0;
}
.eesg-tour:nth-of-type(2) {
	background-color:rgb(255, 228, 153);
	margin-left:30px;
	margin-right:150px;
}
.eesg-tour:nth-of-type(2) h3 {
	background-color:rgb(255, 187, 0);
}
.eesg-tour:nth-of-type(3) {
	background-color:rgba(143, 195, 146,0.4);
	margin-left:60px;
	margin-right:120px;
}
.eesg-tour:nth-of-type(3) h3 {
	background-color:rgb(143, 195, 146);
}
.eesg-tour:nth-of-type(4) {
	background-color:rgb(153, 220, 216);
	margin-left:90px;
	margin-right:90px;
}
.eesg-tour:nth-of-type(4) h3 {
	background-color:rgb(0, 167, 157);
}
.eesg-tour:nth-of-type(5) {
	background-color:rgba(84, 114, 155,0.4);
	margin-left:120px;
	margin-right:60px;
}
.eesg-tour:nth-of-type(5) h3 {
	background-color:rgb(84, 114, 155);
}


.eesg-tour h3::after {
	content:"";
	width:35px;
	height:35px;
	display:inline-block;
	background-color:rgb(215, 233, 59);
	position:absolute;
	top:7.5px;
	right:-18px;
	
	transform:rotate(45deg);
	transform-origin:center;
	
}
.eesg-tour:nth-of-type(2) h3::after {
	background-color: rgb(255, 187, 0);
}
.eesg-tour:nth-of-type(3) h3::after {

	background-color:rgb(143, 195, 146);
}
.eesg-tour:nth-of-type(4) h3::after {

	background-color:rgb(255, 187, 0);
}
.eesg-tour:nth-of-type(4) h3::after {

	background-color:rgb(0, 167, 157);
}
.eesg-tour:nth-of-type(5) h3::after {
	background-color:rgb(84, 114, 155);
}


.eesg-tour {
  	font-size: 18px;
  	transform-origin:10% 0;
  	transform:scale(1) rotate(0deg);
  	opacity:0;
  	box-sizing:border-box;
  	border-bottom:0 solid rgba(255, 187, 0, 0);
  	transition: transform 1s ease, opacity 0.5s ease, margin 0.5s ease, border-bottom 0.5s ease; /* animiert die Änderung */
}


.eesg-tour.active {
  	/*font-size: 22px;*/
  	transform:scale(1.2);
}
.eesg-tour.opacity {
  	opacity:1;
}
.eesg-tour.end {
  	transform-origin:center;
  	z-index: 1;
  	margin-right:-50px !important;
  	transform:scale(1) rotate(0);
  	position:relative;
  	border-bottom:4px solid rgba(255, 187, 0, 1);
  	margin-left:-40px;
  	font-weight:bold;
}




@media (max-width: 1500px) {
	.sc-back-to-eesg {
		width:30px;
		height:140px;
	}
	.sc-back-to-eesg .small {
	  display: block;
	  width: 120px;
	  	translate:0 90px;
  		transform-origin: 0;
	}
	.sc-back-to-eesg .big {
	  display: none;
	}
}
@media (max-width: 900px) {
	.eesg-tour {
		margin-right:104px;
		margin-left:0;
	}
	.eesg-tour:nth-of-type(2) {
		margin-right:78px;
		margin-left:20px;
	}
	.eesg-tour:nth-of-type(3) {
		margin-right:52px;
		margin-left:40px;
	}
	 .eesg-tour:nth-of-type(4) {
		margin-right:26px;
		margin-left:60px;
	}
	.eesg-tour:nth-of-type(5) {
		margin-right:0;
		margin-left:80px;
	}
	.eesg-tour.mobile {
		margin-left:0;
	}
	.eesg-tour.end {
		margin-left:-40px;
	}
}

@media (max-width: 768px) {
	.sc-back-to-eesg {
		display:none;
	}
}
@media (max-width: 599px) {
	.eesg-intro-header .wp-block-column:last-child {
	  text-align: left;
	}
}
@media (max-width: 540px) {
	.sc-tour-headline {
		left:20px;
	}
	.sc-intro-tour-content {
		padding: 110px 20px 110px 20px;
	}
	.eesg-tour.end {
	  margin-right: -20px !important;
	}
	.eesg-tour {
		margin-right:0;
		margin-left:0;
		min-height:initial !important;
	}
	.eesg-tour:nth-of-type(2) {
		margin-right:0;
		margin-left:0;
	}
	.eesg-tour:nth-of-type(3) {
		margin-right:0;
		margin-left:0;
	}
	 .eesg-tour:nth-of-type(4) {
		margin-right:0;
		margin-left:0;
	}
	.eesg-tour:nth-of-type(5) {
		margin-right:0;
		margin-left:0;
	}
	.sc-start-button.position {
		right:20px;
	}
	.eesg-tour.end {
		margin-left:-20px;
	}
}