#ponyreiten {
	max-width: none;
	margin-left: auto;
}

#ponyreiten h1 {
	margin-bottom: 30px;
}

#ponyreiten h2 {
	margin-top: 0;
	text-align: left;

}

.homepage #contentWrapper > #ponyreiten > h1.cmsHeadline {
	margin-top: 30px;
}

.homepage #contentWrapper > #ponyreiten > h2.cmsHeadline {
	margin-top: 0;
}

.bild-pony {
	text-align: center;
	position: relative;
  	z-index: 1;
	align-self: center;
}

.zeichnung-pony {
	margin-top: -70px;
	position: relative;
  	z-index: 1;
	align-self: flex-end;
}

.ponyreiten-bilder {
	display: flex;
  	flex-direction: column;
	width: 100%;
	text-align: right;
	margin-bottom: 30px;
}

.ponyreiten-einleitungstext {
	display: block;
	max-width: 400px;
}

#ponyreiten-content {
	min-height: 900px;
	background-image: url(img/01-CONTENT-Bubble-gruen.png);
	background-repeat: no-repeat;
	background-position-y: 140px;
	background-position-x: -100px;
}


#ponyreiten div.roterText,
#ponyreiten div.gruenerText {
	position: relative;
	font-family: var(--delicious-font);
	font-size: 40px;
	line-height: 1.6;
}

#ponyreiten .kursname {
	padding-top: 7px;
	padding-bottom: 7px;
	color: var(--dunkelgruen2);
	font-size: 30px;
	line-height: 1.4;
	text-transform: uppercase;
}

#ponyreiten .roterText .zahl {
	font-size: 65px;
}

#ponyreiten .roter-pfeil {
	padding-left: 100px;
}

#ponyreiten .roter-pfeil::before {
	content: url('img/01-CONTENT-Pfeil-rot.png');
	position: absolute;
	transform: translateX(-120%);
}


@media screen and (min-width: 700px) {
	#ponyreiten {
		max-width: 97vw;
	}

	#ponyreiten h1 {
		margin-bottom: 80px;
	}

	.ponyreiten-daten {
		padding-left: 100px;
		padding-top: 50px;
	}	

	#ponyreiten-content {
		padding-left: 8vw;
		background-position-x: 0;
	}

	.ponyreiten-bilder {
		position: relative;
		z-index: 2;
		float: right;
		width: 500px;
		max-width: 40vw;
		margin-bottom: 0;
	}
}

@media screen and (min-width: 1200px) {
	#ponyreiten {
		max-width: 1060px;
	}

	#ponyreiten-content {
		padding-left: 100px;
	}
}