@media screen and (min-width: 360px) {

/*******************************************************************************************/
/*** CONTENT *******************************************************************************/
/*******************************************************************************************/
	
	/*** Bubble ***/
	
	#graphic.bubble .txt {
		left: 10%;
	}
	
}

@media screen and (min-width: 480px) {

/*******************************************************************************************/
/*** ALLGEMEIN *****************************************************************************/
/*******************************************************************************************/	
	
	h1 span, .main-cnt h1 span {
		font-size: 4rem;
	}
	
	#infos h1 span {
		line-height: 3rem;
	}
	
/*******************************************************************************************/
/*** CONTENT *******************************************************************************/
/*******************************************************************************************/
	
	/*** Bubble ***/
	
	.bubble .txt span {
		font-size: 14px;
		min-width: 200px;
	}
	
	.bubble .heart {
		width: 50px;
		height: 50px;
	}
	
	#katzen.bubble .txt {
		margin-left: -10rem;
	}
	
	#graphic.bubble .txt {
		left: 25%;
	}
	
	#graphic.bubble .txt span:nth-child(1) {
		left: -60px;
	}
	
	/*** Zitat ***/
	
	.quote .author {
		font-size: 3rem;
		position: relative;
		z-index: -1;
		margin: -2.8125rem 0 0 0;
	}
	
	/*** Galerie ***/
	
	.gallery .frame.txt {
		padding: 50px 0;
	}
	
	.gallery .frame.txt p {
		max-width: 640px;
		width: 100%;
		margin: 0 auto;
	}
	
	.gallery .frame.txt .large {
		font-size: 3rem;
		margin-top: -50px;
	}
	
	.gallery .frame.txt .large::before {
		margin-left: -105px;
	}
	
/*******************************************************************************************/
/*** SEITEN ********************************************************************************/
/*******************************************************************************************/
	
	/*** Über uns ***/
	
	#ce09 {
		padding: 0 90px;
		position: relative;
	}
	
	#ce09::after {
		content: '';
		width: 90px;
		height: 240px;
		background: url("/tiervermittlung/typo3conf/ext/tierheim_pflanzwirbach/Resources/Public/Images/geld2.svg") no-repeat top right/135px auto;
		position: absolute;
		left: -25px;
		top: 0;
		z-index: -1;
	}
	
	/*** Kontakt ***/
	
	#ce06.multicol .cnt-icon {
		position: absolute;
		top: 0;
		left: 0;
	}
	
	#ce06.multicol #ce08  {
		top: 10rem;
	}
	
	#ce06.multicol > .col {
		padding-left: 75px;
	}
	
	#ce06.multicol > .col:last-child {
		padding-left: 0;
	}
	
	#ce07.multicol .col:last-child {
		padding-left: 100px;
	}
	
	#ce06.multicol #map {
		max-width: 510px;
		margin: 0 auto;
	}
	
	#ce07.multicol .col:last-child::before {
		content: '';
		width: 90px;
		height: 240px;
		background: url("/tiervermittlung/typo3conf/ext/tierheim_pflanzwirbach/Resources/Public/Images/geld.svg") no-repeat top right/135px auto;
		position: absolute;
		left: -25px;
		top: 0;
	}
	
/*******************************************************************************************/
/*** FOOTER ********************************************************************************/
/*******************************************************************************************/
	
	/*** Footer Kontakt ***/
	
	.ftr.top .col p {
		width: calc(100% - 50px);
		padding: 0 0 0 25px;
	}
	
}

@media screen and (min-width: 640px) {
	
/*******************************************************************************************/
/*** CONTENT *******************************************************************************/
/*******************************************************************************************/	
	
	/*** Bubble **/
	
	#graphic.bubble .txt span:nth-child(1) {
		left: -100px;
	}
	
	/*** Karte ***/

	#map {
		height: 560px;
	}

	#map img {
		right: -90px;
		width: 650px;
	}

	#map .circle {
		width: 100px;
		height: 100px;
		top: 96px;
		right: 88px;
	}

	#map .circle span {
		height: 100px;
		width: 100px;
	}

	#map .circle span:nth-child(2) {
		width: 60px;
		height: 60px;
	}

	#map .circle span:nth-child(3) {
		width: 50px;
		height: 50px;
	}
	
	/*** Galerie ***/
	
	.gallery .frame {
		width: calc(100%/3 - 10px);
		max-width: 200px;
		height: 200px;
	}
	
	.overlay-gallery .inner {
		max-width: 570px;
	}
	
	.swiper {
		max-width: 500px;
		max-height: 540px;
	}

/*******************************************************************************************/
/*** SEITEN ********************************************************************************/
/*******************************************************************************************/	
	
	/** Kontakt **/

	#kontakt .section.intro .multicol.mc2 .col:nth-child(1)::after {
		left: 50px;
	}
	
	#ce06.multicol #map {
		max-width: 650px;
	}
	
	#ce06.multicol #map .circle {
	  right: 138px;
	}
	
	#ce07.multicol .col:last-child::before {
		width: 135px;
	}
	
	#ce07.multicol .col:last-child {
		padding-left: 150px;
	}
	
/*******************************************************************************************/
/*** FOOTER ********************************************************************************/
/*******************************************************************************************/
	
	/*** Störer ***/

	.quicklinks {
		position: fixed;
		z-index: 99;
		top: 25%;
		right: 0;
		width: 150px;
		height: 300px;
	}

	.quicklinks .link {
		width: 150px;
		height: 150px;
		position: relative;
	}

	#donation.link {
		background: url("/tiervermittlung/typo3conf/ext/tierheim_pflanzwirbach/Resources/Public/Images/patch01.webp") no-repeat center/100% auto;
	}

	#phone.link {
		background: url("/tiervermittlung/typo3conf/ext/tierheim_pflanzwirbach/Resources/Public/Images/patch02.webp") no-repeat center/100% auto;
	}

	.quicklinks .link svg {
		width: 75px;
		height: 75px;
	}

	#donation.link svg {
		margin-top: -8px;
	}

	#donation.link svg .st0 {
		fill: #ffffff;
	}

	#donation.link svg .st1 {
		fill: #D96519;
	}

	#donation #coin {
		transition: transform 0.5s;
	}

	#donation:hover #coin {
		transform: translateY(18px);
	}

	#phone.link svg .st0 {
		fill: none;
	}

	#phone.link svg .st1,
	#phone.link svg .st2 {
		fill: #ffffff;
	}

	#phone.link #icon {
		position: absolute;
		z-index: 2;
		width: 48px;
		height: 20px;
		top: 54px;
		transition: transform 0.5s;
		transform-origin: center bottom;
	}

	#phone.link:hover #icon {
		transform: rotate(135deg) translateY(5px) translateX(2px);
	}

	#phone.link:hover #icon path {
		fill: #F7B217;
	}

	#phone:hover #svg_02 rect {
		fill: #fff;
	}

	/*** Cookies ***/

	#cookies {
		position: fixed;
		bottom: 15px;
		left: 15px;
		z-index: 99;
		height: 100px;
		display: flex;
		align-items: center;
		text-decoration: none;
	}

	#cookies .circle {
		width: 100px;
		height: 100px;
		border-radius: 100%;
		display: block;
		background: linear-gradient(to bottom, var(--btn-green1), var(--btn-green2));
		transition: all 0.3s;
	}

	#cookies:hover .circle {
		background: var(--black);
		width: 250px;
		border-radius: 3px;
		height: 35px;
	}

	#cookies .circle .txt {
		display: none;
		letter-spacing: var(--ls-large);
		text-transform: uppercase;
		color: #fff;
		width: 250px;

		justify-content: flex-end;
		align-items: center;
		height: 100%;
		padding-right: 50px;
		line-height: 1;
	}

	#cookies:hover .circle .txt {
		display: flex;
	}

	#cookies .icon {
		position: absolute;
		width: 100px;
		height: 100px;
		z-index: 2;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
	}

	#cookies .icon img {
		width: 5rem;
	}

	#cookies .pattern {
		position: absolute;
		width: 100px;
		height: 100px;
		z-index: 1;
		top: -5px;
		left: -5px;
		transition: 0.3s;
	}

	#cookies:hover .pattern {
		opacity: 0;
	}
	
}

@media screen and (min-width: 960px) {
	
/*******************************************************************************************/
/*** ALLGEMEIN *****************************************************************************/
/*******************************************************************************************/
	
	main {
		padding: 6.25rem 0 0 0;
	}

	/*** Grid ***/

	.multicol.mc2 .col {
		margin: 0;
	}

	.multicol.mc2 .col {
		width: calc(100%/2 - 1.5625rem);
	}
	
	.multicol.mc2.cc-65-35 > .col:nth-child(1) {
		width: calc(65% - 1.5625rem);
	}
	
	.multicol.mc2.cc-65-35 > .col:nth-child(2) {
		width: calc(35% - 1.5625rem);
	}

	.multicol.mc3 .col {
		width: calc(100%/2 - 0.3125rem);
	}
	
/*******************************************************************************************/
/*** HEADER ********************************************************************************/
/*******************************************************************************************/
		
	header {
		height: 6.25rem;
	}
	
	/*** Desktop Nav ***/
	
	#mo-btn, #close,  nav ul li.hide {
		display: none;
	}
	
	nav {
		position: relative;
		width: calc(100% - 10rem);
		max-width: 100%;
		height: auto;
		background: #fff;
		top: auto;
		left: auto;
		padding: 0;
		box-shadow: none;
	}
	
	nav ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
	}

	nav ul li {
		margin: 0 0 0 3.5%;
		display: inline-block;
	}

	nav ul li a {
		display: block;
		text-align: center;
		font-size: 0.75rem;
		letter-spacing: 0.175rem;
	}

	nav ul li a:hover::before,
	nav ul li a.active {
		width: 100%;	
	}

	nav ul li a span {
		margin: 0;
	}
	
/*******************************************************************************************/
/*** CONTENT *******************************************************************************/
/*******************************************************************************************/

	/*** Bubble ***/
	
	#esel.bubble {
		margin: 0 auto;
		margin-top: -100px;
		max-width: 510px;
	}
	
	#esel.bubble img {
		margin: 0;
	}
	
	#hund01.bubble {
		margin-top: -100px;
		margin-bottom: 50px;
	}
	
	#katzen.bubble {
		margin: -6.25rem 0 0 0;
	}
	
	#tierarten #hund01.bubble {
		margin: -6.25rem 0 0 0; 
	}
	
	#vogel.bubble {
		margin: 0 auto;
		margin-top: -100px;
	}
	
	#graphic.bubble {
		margin: -100px 0;
	}
	
	#eule.bubble {
		margin: 0;
	}
	
	#error .intro  .multicol.mc2 .col:last-child {
		margin: -100px 0;
	}
	
	/*** Teaser ***/
	
	#teaser.multicol .col:nth-child(3) {
		margin: 0 auto;
	}
	
	/*** Zitat ***/
	
	.quote {
		margin: 50px 0 0 0;
	}
	
	/*** Galerie ***/
	
	.gallery .frame {
		width: calc(100%/3 - 10px);
		padding: 20px 20px 60px 20px;
		max-width: 250px;
		height: 290px;
	}
	
	
/*******************************************************************************************/
/*** SEITEN ********************************************************************************/
/*******************************************************************************************/

	/*** Über uns ***/
	
	#ce09 {
		margin-top: 6.25rem;
	}
	
	#ce09::after {
		top: -3.125rem;
	}
	
	/*** Infos ***/

	/** Bubble Hintergründe **/

	#ce05.multicol.mc3 .col h3 {
		margin: 0 0 1.875rem 0;
	}
	
	#ce04.multicol.mc3 .col:nth-child(3) {
		margin: 0 auto;
	}
	
	/*** Kontakt ***/
	
	#kontakt .section.intro .multicol.mc2 .col:nth-child(1)::after {
		left: auto;
		right: -50px;
	}
	
	#ce06.multicol.mc3 .col:nth-child(3) {
		width: 100%;
	}
	
	#ce07.multicol .col:last-child {
		padding-left: 0;
	}
	
	#ce07.multicol .col:last-child::before {
		left: auto;
		right: -25px;
		top: auto;
		bottom: 0;
	}

	
/*******************************************************************************************/
/*** FOOTER ********************************************************************************/
/*******************************************************************************************/
	
}

@media screen and (min-width: 1024px) {
	
/*******************************************************************************************/
/*** ALLGEMEIN *****************************************************************************/
/*******************************************************************************************/
	
	main {
		padding: 120px 0 0 0;
	}
	
	h1 span, .main-cnt h1 span {
		font-size: 5rem;
	}
	
	h2 span, h3 span, .main-cnt h2 span, .main-cnt h3 span {
		font-size: 3.5rem;
	}
	
	#galerie h1 {
		min-height: 300px;
	}

	
/*******************************************************************************************/
/*** CONTENT *******************************************************************************/
/*******************************************************************************************/
	
	/*** Teaser ***/

	#teaser {
		justify-content: center;
	}
	
	/*** Galerie ***/
	
	.overlay-gallery .inner {
		max-width: 670px;
	}

	.swiper {
		max-width: 600px;
		max-height: 640px;
	}

	.swiper .swiper-slide {
		padding: 20px 20px 60px 20px;
	}

	.gallery .frame {
		width: calc(100%/3 - 30px);
		max-width: 300px;
		height: 340px;
		padding: 20px 20px 60px 20px;
		margin: 5px 15px;
	}
	
	#close-gallery {
		right: 20px;
	}
	
/*******************************************************************************************/
/*** SEITEN ********************************************************************************/
/*******************************************************************************************/
	
	/*** Galerie ***/
	
	.bg-pattern.stripes .back {
		background-size: auto 400px;
	}
	
	
/*******************************************************************************************/
/*** FOOTER ********************************************************************************/
/*******************************************************************************************/
	
}

@media screen and (min-width: 1180px) {

/*******************************************************************************************/
/*** HEADER ********************************************************************************/
/*******************************************************************************************/
	
	nav {
		position: relative;
		width: calc(100% - 15rem);
		max-width: 100%;
		height: auto;
		background: #fff;
		top: auto;
		left: auto;
		padding: 0;
		box-shadow: none;
	}
	
	nav ul {
		text-align: right;
	}

	nav ul li {
		margin: 0 0 0 4%;
		display: inline-block;
	}

	nav ul li a {
		display: block;
		text-align: center;
		font-size: 14px;
	}

	nav ul li a:hover::before,
	nav ul li a.active {
		width: 100%;	
	}

	nav ul li a span {
		margin: 0;
	}
}

@media screen and (min-width: 1280px) {
	
/*******************************************************************************************/
/*** ALLGEMEIN *****************************************************************************/
/*******************************************************************************************/
	
	main {
		padding-top: 120px;
	}
	
	h1 {
		margin: 0 0 50px 0;
	}
	
	h1 span {
		font-size: 6rem;
		color: var(--green1);
		position: relative;
		z-index: -1;
		bottom: -40px;
		line-height: 1;
		text-shadow: 2px 2px #fff;
	}
	
	h2 span {
		margin: 10px 0 50px 0;
	}
	
	h2 span, h3 span {
		font-size: 4rem;
	}
	
	#tierarten h1 span {
		bottom: auto;
		z-index: auto;
	}
	
	#infos h1 {
		margin: 0 0 0.3125rem 0;
		line-height: 1.5;
	}
	
	#infos h1 span {
		bottom: auto;
		z-index: auto;
		line-height: 4rem;
	}
	
	#infos h1 span:nth-child(2) {
		margin: 0 0 3.125rem 0;
	}
	
	#galerie h1 {
		min-height: 380px;
		z-index: 1;
		position: relative;
	}
	
	#galerie h1 span {
		position: absolute;
	}
	
	#galerie h1 span:nth-child(1) {
		top: 75px;
	}
	
	#galerie h1 span:nth-child(2) {
		margin: 0;
		bottom: 100px;
	}
	
	#kontakt h1 span {
		bottom: auto;
		z-index: auto;
		line-height: 4rem;
	}
	
	.main-cnt h1 span {
		font-size: 6rem;
	}
	
	.main-cnt h2 span, .main-cnt h3 span {
		font-size: 4rem;
	}
	
	/*** Hintergründe ***/
	
	/** Border **/
	
	.section.border-top {
		padding-top: 150px;
	}

	.section.border-bottom {
		padding-bottom: 150px;
	}

	.border-top::before,
	.border-bottom::after {
		width: 100%;
	}
	
	/** Bogen **/

	.section.border-top2 {
		padding-top: 100px;
	}

	.section.border-bottom2 {
		padding-bottom: 100px;
	}

	.border-top2::before,
	.border-bottom2::after {
		height: 50px;
	}
	
	/* Streifen */

	.intro.bg-pattern.stripes {
		min-height: 720px;
	}
	
	.bg-pattern.stripes .back {
		background-size: auto 520px;
	}
	
	/** Frosch **/

	.bg-color.lblue.frog {
		background: var(--bg-blue) url("/tiervermittlung/typo3conf/ext/tierheim_pflanzwirbach/Resources/Public/Images/frosch.webp") no-repeat bottom right 5%/150px auto;
	}
	
	/* Tierarten */
	
	footer .ftr.bottom.frog {
		background: var(--bg-green1) url("/tiervermittlung/typo3conf/ext/tierheim_pflanzwirbach/Resources/Public/Images/frosch.webp") no-repeat bottom -10px right 5%/150px auto;
	}
	
	/* Konatkt */
	
	#kontakt .bg-color.lorange .frog {
		width: 150px;
		height: 165px;
		background: url("/tiervermittlung/typo3conf/ext/tierheim_pflanzwirbach/Resources/Public/Images/frosch.webp") no-repeat bottom center;
		position: absolute;
		left: 0;
		top: 3.75rem;
		z-index: 1;
		transform: rotate(90deg);
	}
	
	/*** Grid ***/

	.multicol.mc2 .col {
		width: calc(100%/2 - 3.125rem);
	}
	
	.multicol.mc2.cc-65-35 > .col:nth-child(1) {
		width: calc(65% - 1.5625rem);
	}
	
	.multicol.mc2.cc-65-35 > .col:nth-child(2) {
		width: calc(35% - 1.5625rem);
	}

	.multicol.mc3 .col {
		width: calc(100%/3 - 0.3125rem);
		margin: 0;
	}
	
	/*** Buttons ***/
	
	a.btn span {
		position: relative;
		z-index: 2;
	}

	a.btn::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		background: var(--black);
		width: 0;
		height: 100%;
		border-radius: 3px;
		transition: width 0.3s;
	}

	a.btn:hover::after {
		width: 100%;
	}

	a.btn::before {
		content: '';
		position: absolute;
		z-index: 3;
		width: 100px;
		height: 100px;
		top: 5px;
		left: -65px;
		background: url("/tiervermittlung/typo3conf/ext/tierheim_pflanzwirbach/Resources/Public/Images/pfotenabdruck.svg") no-repeat center/contain;
		transform: scale(0);
		transform-origin: top center;
		transition: transform 0.3s;
	}

	a.btn:hover::before {
		transform: scale(1);
	}
	
	/*** Abstände ***/
	
	.space-after-large {
		margin-bottom: 6.25rem;
	}
	
/*******************************************************************************************/
/*** HEADER ********************************************************************************/
/*******************************************************************************************/
	
	header {
		height: 7.5rem;
	}
	
	/*** Logo ***/
	
	#logo {
		width: 15rem;
	}

	#logo .img {
		width: 4.5rem;
	}
	
	#logo .txt {
		width: calc(100% - 4.5rem);
	}
	
	/*** Desktop Nav ***/
	
	nav {
		width: calc(100% - 15rem);
	}

	nav ul li {
		margin: 0 0 0 4%;
	}

	nav ul li a {
		font-size: 1rem;
	}

/*******************************************************************************************/
/*** CONTENT *******************************************************************************/
/*******************************************************************************************/
	
	/*** Bubble ***/
	
	.bubble img {
		max-width: 860px;
	}
	
	.bubble .txt span {
		font-size: 1rem;
		min-width: 225px;
	}
	
	.bubble .heart {
		width: 65px;
		height: 65px;
	}
	
	#esel.bubble {
		margin: -150px 0;
		max-width: 860px;
	}

	#esel.bubble img {
		margin: 0;
	}
	
	footer #hund01.bubble {
		max-width: 640px;
		margin: -100px 0 50px 0;
	}
	
	footer #hund01.bubble img {
		max-width: 460px;
	}
	
	footer #hund01.bubble .heart {
		left: 43%;
	}
	
	#katzen.bubble {
		margin: -150px 0;
	}
	
	#katzen.bubble .txt {
		top: 3.125rem;
	}
	
	#hund02.bubble {
		max-width: 860px;
	}
	
	#tierarten #hund01.bubble {
		max-width: 860px;
		margin: -150px 0;
	}
	
	#vogel.bubble {
		max-width: 860px;
		margin-top:  -150px;
		margin-bottom:  -150px;
	}
	
	#graphic.bubble {
		margin: -150px 0;
		max-width: 860px;
	}
	
	#graphic.bubble .txt {
		left: 50px;
	}
	
	#error .intro  .multicol.mc2 .col:last-child {
		margin: -150px 0;
	}
	
	/*** Teaser ***/

	#teaser.multicol .col h3 {
		margin-top: -30px;
	}
	
	#teaser.multicol .col h3 span {
		z-index: -1;
		bottom: -35px;
	}
	
	#teaser.multicol .col p{
		line-height: 1.5;
	}

	/** Tiere **/

	#teaser.multicol {
		margin-bottom: 50px;
	}

	#teaser.multicol .col .img {
		height: 250px;
		width: 100%;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		margin: 0;
	}

	#teaser.multicol .col .img img {
		height: 100%;
		width: auto;
	}
	
	#teaser.multicol .col:nth-child(2) .img img {
		height: 80%;
	}

	/** Hintergrund Kreis **/

	#teaser.multicol .col::after {
		top: 80px;
		left: -25px;
		width: calc(100% + 50px);
		height: 500px;
	}
	
	#teaser.multicol .col:nth-child(1)::after,
	#teaser.multicol .col:nth-child(2)::after,
	#teaser.multicol .col:nth-child(3)::after {
		background-size: 500px auto;
	}
	
	/*** Zitat ***/
	
	.quote {
		margin: 50px 0 0 0;
	}
	
	.quote .author {
		font-size: 4rem;
	}
	
	/*** Karte ***/
	
	#map:hover .circle span {
		height: 150px;
		width: 150px;
	}

	#map:hover .circle span:nth-child(2) {
		width: 80px;
		height: 80px;
	}

	#map:hover .circle span:nth-child(3) {
		width: 70px;
		height: 70px;
	}
	
	/*** Galerie ***/

	.gallery {
		margin: -400px 0 0 0;
		justify-content: space-between;
	}

	.gallery .frame {
		width: calc(100%/4 - 30px);
		margin: 25px 15px;
	}

	.gallery .frame::before {
		content: '';
		width: 100px;
		height: 100px;
		background: url("/tiervermittlung/typo3conf/ext/tierheim_pflanzwirbach/Resources/Public/Images/paw.svg") no-repeat center/contain;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -50px;
		margin-left: -50px;
		z-index: 1;
		transition: transform 0.3s;
		transform: scale(0);
	}

	.gallery .frame:hover::before {
		transform: scale(1);
	}

	.gallery .frame.txt {
		width: calc(100%/4);
		max-width: 400px;
		border: none;
		box-shadow: none;
		padding: 25px 0 0 0;
		background: none;
	}

	.gallery .frame.txt::before {
		content: none;
	}

	.gallery .frame.txt .large::before {
		width: 65px;
		height: 65px;
		margin-left: -130px;
		bottom: -30px;
	}

	.gallery .frame .img {
		position: relative;
		width: 100%;
		height: 100%;
		background: var(--black);
	}

	.gallery .frame .img img {
		object-fit: cover;
		width: 100%;
		height: 100%;
		border-radius: 2px;
		transition: 0.3s;
	}

	.gallery .frame:hover img {
		opacity: 0.65;
	}

/*******************************************************************************************/
/*** SEITEN ********************************************************************************/
/*******************************************************************************************/

	/*** Home ***/

	#home .section.intro .multicol.mc2 .col:nth-child(2) {
		padding-right: 100px;
	}
	
	#home .section.intro .multicol.mc2 .col:nth-child(2) a.btn.green {
		right: -100px;
	}
	
	/*** Über uns ***/
	
	#ce09::after {
		width: 135px;
		left: -12%;
	}
	
	/*** Tierarten ***/

	#ce02.multicol::after {
		background-size: 820px auto;
		background-position: top left;
	}

	#ce02.multicol .txt-img {
		padding: 150px 0 0 0;
		min-height: 600px;
	}

	#ce02.multicol .txt-img .img {
		margin: -5rem 0 0 0;
		width: 400px;
	}
	
	#ce02.multicol .txt-img .img img {
	  max-width: 400px;
	}

	#ce02.multicol .txt-img .txt {
		width: calc(100% - 400px);
		padding: 0 50px 0 0;
	}
	
	/*** Infos ***/

	#infos .section.intro .multicol.mc2 .col:nth-child(2) {
		padding-right: 100px;
	}
	
	#infos .section.intro .multicol.mc2 .col:nth-child(2) a.btn.green {
		right: -100px;
	}
	
	/** Bubble Hintergründe **/
	
	#ce05.multicol.mc3 {
		min-height: 550px;
	}
	
	#ce05.multicol.mc3 .col:nth-child(1) {
		padding-top: 100px;
	}
	
	#ce05.multicol.mc3 .col:nth-child(2) {
		padding-top: 200px;
	}
	
	#ce05.multicol.mc3 .col:nth-child(3) {
		padding-top: 50px;
	}
	
	#ce05.multicol.mc3::before {
		content: '';
		left: -25px;
		width: calc(100% + 50px);
		height: 100%;
		background: url("/tiervermittlung/typo3conf/ext/tierheim_pflanzwirbach/Resources/Public/Images/circle-bg02.webp") no-repeat top left/460px auto;
		position: absolute;
		top: -50px;
		z-index: -1;
	}

	#ce05.multicol.mc3::after {
		content: '';
		left: auto;
		width: 100%;
		background: url("/tiervermittlung/typo3conf/ext/tierheim_pflanzwirbach/Resources/Public/Images/circle-bg03.webp") no-repeat bottom right/760px auto;
		position: absolute;
		bottom: -50px;
		right: -25px;
		z-index: -1;
	}
	
	/** Statistik Tiere **/
	
	#ce04.multicol.mc3 {
		margin-top: -100px;
	}
	
	#ce04.multicol.mc3 .col h3 span {
		bottom: auto;
	}
	
	#ce04.multicol.mc3 .col .img {
		height: 250px;
	}
	
	#ce04.multicol.mc3 .col:nth-child(3) .img {
		padding-top: 10%;
	}
	
	/*** Kontakt ***/
	
	#kontakt .section.intro .multicol.mc2 .col:nth-child(1) {
		padding-bottom: 100px;
	}
	
	#kontakt .section.intro .multicol.mc2 .col:nth-child(1)::after {
		width: 350px;
		height: 150px;
	}

	#ce06.multicol .cnt-icon,
	#ce06.multicol #ce08 {
		position: relative;
		top: auto;
		left: auto;
	}
	
	#ce06.multicol > .col {
		padding-left: 0;
		z-index: 2;
	}
	
	#ce06.multicol.mc3 .col:nth-child(3) {
		width: calc(100%/3 - 5px);
		z-index: 1;
	}
	
	#ce06.multicol #map {
		width: 650px;
		margin: 0 0 0 -245px;
		left: auto;
		right: -25px;
	}
	
/*******************************************************************************************/
/*** FOOTER ********************************************************************************/
/*******************************************************************************************/	
	
	/*** Footer Logo ***/
	
	.ftr.bottom .logo {
		margin: 0 0 1.25rem 0;
	}

	.ftr.bottom .logo .img {
		margin: 0 0 0 -1.25rem;
	}

	.ftr.bottom .logo .img img {
		width: 150px;
	}
	
	.ftr.bottom .logo .txt {
		font-size: 1rem;
	}

	.ftr.bottom .logo .txt span {
		display: block;
		font-family: 'Emilys Candy';
		font-size: 1.8rem;
		line-height: 1.65rem;
		margin: 0 0 0.25rem 0;
	}

	.ftr.bottom .copyright {
		font-size: 14px;
	}

}



@media screen and (min-width: 1600px) {

	/*** Hintergründe ***/
	
	/** Border **/
	
	.section.border-top {
		padding-top: 12.5rem;
	}

	.section.border-bottom {
		padding-bottom: 12.5rem;
	}

	.border-top::before,
	.border-bottom::after {
		height: 9.375rem;
	}
	
/*******************************************************************************************/
/*** CONTENT *******************************************************************************/
/*******************************************************************************************/	
	
	/*** Bubble ***/
	
	.bubble .txt span {
		font-size: 1.125rem;
		padding: 0.625rem 2.5rem;
	}
	
	#esel.bubble {
		margin: -12.5rem 0;
	}
	
	#katzen.bubble {
		margin: -12.5rem 0;
	}
	
	#katzen.bubble .txt {
		margin-left: -13rem;
	}
	
	#katzen.bubble .txt span:nth-child(1) {
		left: -3.125rem;
	}
	
	#tierarten #hund01.bubble {
		margin: -12.5rem 0;
	}
	
	#vogel.bubble {
		margin: -12.5rem 0;
	}
	
	#graphic.bubble {
		margin: -12.5rem 0;
	}
	
	#error .intro .multicol.mc2 .col:last-child {
		margin: -12.5rem 0;
	}
	
	/*** Teaser ***/
	
	/** Tiere **/

	#teaser.multicol {
		width: calc(100% + 12.5rem);
		margin-left: -6.25rem;
	}
	
	/*** Zitat ***/
	
	.quote {
		margin: 6.25rem 0 0 0;
	}
	
	/*** Galerie ***/

	.gallery {
		left: -1.5625rem;
		width: calc(100% + 3.125rem);
	}
	
/*******************************************************************************************/
/*** SEITEN ********************************************************************************/
/*******************************************************************************************/
	
	/*** Home ***/
	
	#home .section.intro .multicol.mc2 .col:nth-child(2) {
		margin-top: -3.125rem;
	}
	
	/*** Über usn ***/
	
	#ueber-uns .section.intro .multicol.mc2 .col:nth-child(1) {
		padding-right: 100px;
	}
	
	/*** Infos ***/
	
	#ce05.multicol.mc3::after {
		right: -3.125rem;
	}
	
}

@media screen and (min-width: 1920px) {
	
/*******************************************************************************************/
/*** ALLGEMEIN *****************************************************************************/
/*******************************************************************************************/
	
	h1 span {
		font-size: 7rem;
	}
	
	#galerie h1 {
		min-height: 435px;
	}
	
	#galerie h1 span:nth-child(1) {
		top: 90px;
	}
	
	#galerie h1 span:nth-child(2) {
		bottom: 110px;
	}
	
	/*** Hintergründe ***/
	
	.bg-pattern.waves .back {
		background-size: auto 200%;
	}
	
/*******************************************************************************************/
/*** SEITEN ********************************************************************************/
/*******************************************************************************************/	
	
	/*** Über uns ***/
	
	#ueber-uns #map {
		overflow: visible;
	}
	
	/*** Kontakt ***/
	
	#ce06.multicol #map {
		right: -6.875rem;
	}
	
}