@charset "UTF-8";
	html {
		margin:0;
		padding:0;
		font-size:15px;
	}
	body {
		margin:0;
		padding:0;
		background:url("../img/BG-4.png") top center no-repeat;
	}
body.imp {
	background: none;
	
}
	#wrapper {
		max-width:1200px;
		margin:0 auto;
		padding: 0 2% 2% 2%;
		min-height:800px;
	}
	#topnav {
		display:flex;
		margin:30px 0 0 0;
		max-width:300px;
		font-family:Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
		color:#FFF;	
	    font-size:0.95rem;
	}
	#topnav a {
		min-width:90px;
		color:#FFF;
		text-decoration: none;
	}
	h1 {
		margin:100px 0 30px 0;
		font-size:70px;
		color:#FFFFFF;
		font-family:Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif"
	}
body.imp h1 {
		color:#353232;
}
body.imp #topnav a, .kontaktangaben a {
		color:#353232;
}
	h2 {
	margin:4px 0 6px 0;
		padding:0;
		font-size:22px;
		font-weight:bold;
		color:#262525;
	}
	#content {
		margin-top:125px;
		font-family:Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
		color:#353232;
	}
	.introtext {
		margin:20px 0 40px 0;
		font-size:26px;
		color:#353232;
	}
	.kontakt {
				margin:15px 0 0 0;
		font-size:22px;
		color:#353232;
		width:100%;
		background: hsla(30, 2%, 80%, 1);
background: linear-gradient(90deg, hsla(30, 2%, 80%, 1) 0%, hsla(0, 0%, 100%, 1) 100%);
background: -moz-linear-gradient(90deg, hsla(30, 2%, 80%, 1) 0%, hsla(0, 0%, 100%, 1) 100%);
background: -webkit-linear-gradient(90deg, hsla(30, 2%, 80%, 1) 0%, hsla(0, 0%, 100%, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#CECDCC", endColorstr="#FFFFFF", GradientType=1 );
	}
	.kontaktangaben  {
		max-width:1200px;
		margin:0 auto;
		padding:2% 2% 3% 2%;
	}
	.kontaktangaben p {
		background:url("../img/telefon.svg") no-repeat left;
		background-size:90px auto;
		padding-left: 20%;
	}
	.angebote {
		display:grid;
		grid-template-columns: repeat(auto-fit, minmax(550px,1fr) );
		font-size:18px;
		gap:2em;
		margin-bottom:25px;
		color:#353232;
	}
	.angebot p {
		background:url("img/reden.svg") no-repeat left;
		background-size:90px auto;
		padding-left: 20%;
	}
		.hilfe p {
		background:url("../img/shopping.svg") no-repeat left;
	}
			.abwesend p {
		background:url("../img/giesskanne.svg") no-repeat left;
	}
				.haustier p {
		background:url("../img/hund.svg") no-repeat left;
	}
					.schreiben p {
		background:url("../img/schreiben.svg") no-repeat left;
	}
					.reden p {
		background:url("../img/reden.svg") no-repeat left;
	}
						.kaffee p {
		background:url("../img/kaffee.svg") no-repeat left;
	}
	.kontaktangaben p {
		background:url("../img/telefon.svg") no-repeat left;
		background-size:100px auto;
		padding-left: 10%;
		max-width:90%;
	}
@media screen and (min-width: 800px) and (max-width: 1200px) {
		#wrapper {
		max-width:96%;
	}	
  .angebot p, .kontaktangaben p {
   		padding-left: 16%;
	  	background-size:90px auto;
  }
		.schreiben p {
		min-height:90px;
	}
}
@media screen and (min-width: 600px) and (max-width: 799px) {
			body {
		background:url("../img/BG-T.png") top center no-repeat;
	}
	#wrapper {
		max-width:96%;
	}
	h1 {
		margin:60px 0 30px 0;
		font-size:50px;
	}
	#content {
		margin-top:90px;
	}
		.angebot p, .kontakt p {
   		padding-left: 20%;
		background-size:84px auto;
  }
		.schreiben p {
		min-height:90px;
	}

	}
@media screen and (min-width: 300px) and (max-width: 599px) {
		body {
		background:url("../img/BG-M.png") top center no-repeat;
	}
		#wrapper {
		max-width:96%;
	}
	h1 {
		margin:60px 0 30px 0;
		font-size:34px;
		 hyphens: manual;
	}
		#content {
		margin-top:70px;
	}
				.angebote {
			grid-template-columns: 1fr;
	}
			  .angebot p, .kontakt p {
   		padding-left: 20%;
		background-size:60px auto;
  }
  }