body {
	background-color: #ecece8;
	font-size: 10px;
	width: 95%;
	margin: auto;
	padding: 0px;
}

ul {
	margin-left: 0px;
	padding-left: 0px;
}

.wrapper {
	max-width: 1250px;
	margin-left: auto;
	margin-right: auto;
	font-size: 1rem;
}

header {
	width: 100%;
	margin: auto;
	padding-top: 200px;
	padding-block-start: 10px;
	text-align: center;
}

/* ---------------------- Smartphone ---------------*/

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

	.wrapper {
		font-size: 0.7rem;
		display: flex;
		flex-direction: column;
	}

	header {
		padding-top: 10px;
		order: 1;
	}

	#Banner {
		width: 100%;
		margin: auto;
	}
		/* ---------- Navigation oben -------------*/
	nav {
		border: 1px solid #000000;
		border-radius: 5px;
		text-align: center;
		box-shadow: -5px 5px 10px gray;
		order: 2;
	}

	nav ul {
		list-style-type: none;
	}

	nav li {
		display: inline;
		margin-right: 10px;
	}

	nav a:hover {
		background-color: blue;
		color: white;
	}

	nav li a {
		text-decoration: none;
		color: rgb(38, 33, 30);
	}

	a {
		color: rgb(249, 209, 121);
	}

	/* ----------Leistungsliste -------------*/

	.saidbar {
		order: 4;
	}

	#saidbar {
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 10px;
		margin-top: 10px;
		padding-bottom: 5px;
		width: 16em;
		border: 1px solid #4c3be7;
		border-radius: 5px;
		background-color: rgb(188, 221, 235);
		box-shadow: -5px 5px 10px gray;
	}

	#saidbar h4 {
		margin: 10px;
	}

	#saidbar h5 {
		margin: 0px;
		color: darkred;
	}

	#saidbar ul {
		margin: 0px;
		padding-left: 30px;
	}

	#saidbar li {
		list-style-type: none;
	}

	.Willkommen {
		text-align: center;
		order: 2;
	}
	
	.Haustüren{
		order: 3;
	}
	
	#Haustüren {
		text-align: center;
	}

	#Haustüren h7 {
		color: #4c3be7;
	}
	#Haustüren h2 {
		text-align: center;
		color: rgb(210, 111, 30)
	}
	.Endtext {
		order: 5;
	}



	#Endtext {
		text-align-last: center;
		max-width: 600px;
	}
	.bft{
		order: 6;
	}
	#bft {
		text-align: center;
		margin-top: 10px;
	}

	#angebote {
		color: rgb(241, 13, 55);
		text-align: center;
	}

	/* -------------- Datenschutz ---------------*/
	#datenschutz {
		width: 800px;
		margin-right: auto;
		margin-left: auto;
		margin-top: 20px;
		margin-bottom: 20px;
	}

	#datenschutz p {
		font-size: 11px;
		color: gray;
	}

	/* Impressum */
	.impressum {
		margin-right: auto;
		margin-left: auto;
		background: white;
		width: 1000px;
	}

	.impressum p {
		text-align: center;
	}

	.impressum h1 {
		text-align: center;
	}
	.Footer {
		order: 7;
	}
	footer {
		width: 100%;
		background-color: rgb(114, 110, 110);
		border: 1px solid #000000;
		border-radius: 5px;
		clear: both;
		margin-right: auto;
		margin-left: auto;
		margin-top: 20px;
	}
	

	footer ul {
		margin-left: 20px;
		float: left;
		list-style: none;
	}
	
	footer li {
		margin-right: 15px;
		display: inline;
	}
	
	footer li a {
		text-decoration: none;
		color: rgb(235, 182, 109);
	}
	
	footer li a:hover {
		color: white;
	}
	
	footer p {
		text-align: right;
		margin-right: 20px;
		color: rgb(250, 249, 249);
	}
}

/* ------------------------ Tablet ---------------*/

@media screen and (min-width:481px) and (max-width:766px) {

	.wrapper {
		Font-size: 0.8rem;
	}

	header {
		padding-top: 20px;
	}

	#Banner {
		margin: auto;
		width: 90%;

	}

	nav {

		margin-top: 20px;
		border: 1px solid #000000;
		border-radius: 5px;
		text-align: right;
		max-width: 1000%;
		box-shadow: -5px 5px 10px gray;
	}

	nav ul {
		list-style-type: none;
	}

	nav li {
		display: inline;
		margin-right: 40px;

	}

	nav a:hover {
		background-color: blue;
		color: white;
	}

	nav li a {
		text-decoration: none;

	}

	a {
		color: rgb(245, 200, 102);
	}

	#main {
		max-width: 600px;
		margin-left: 300px;
		padding-top: 150px;
	}

	#Willkommen {
		text-align: center;
		margin-top: 50px;
	}

	#Willkommen h7 {
		color: #4c3be7;
	}

	#Willkommen h3 {
		color: chocolate;
	}
	#Haustüren {
		margin-top: 50px;
		text-align: center;
	}

	#Haustüren h7 {
		color: #4c3be7;
	}
	#Haustüren h2 {
		text-align: center;
		color: rgb(210, 111, 30)
	}

	#Endtext {
		text-align: center;
	}

	#angebote {
		color: crimson;
		text-align: center;
	}

	#bft {
		text-align: center;
		margin-top: 10px;
	}

	#bft p {
		text-align: center;
	}

	/* Leistungsliste */
	#saidbar {
		margin-top: 10px;
		margin-bottom: 10px;
		padding: 10px;
		width: 200px;
		border-right: 4px solid #faf9f7;
		border-top: 4px solid #faf9f7;
		border-radius: 5px;
		box-shadow: -15px 15px 10px gray;
		float: left;
		background-color: rgb(233, 233, 233);
	}

	#saidbar h4 {
		margin: 10px;
	}

	#saidbar h5 {
		margin: 0px;
		color: darkred;
	}

	#saidbar ul {
		margin: 0px;
		padding-left: 30px;
	}

	.saidbar li {
		list-style-type: none;
	}

	/* Datenschutz */
	#datenschutz {
		width: 800px;
		margin-right: auto;
		margin-left: auto;
		margin-top: 20px;
		margin-bottom: 20px;
	}

	#datenschutz p {
		font-size: 11px;
		color: gray;
	}

	/* Impressum */
	.impressum {
		margin-right: auto;
		margin-left: auto;
		background: white;
		width: 1000px;
	}

	.impressum p {
		text-align: center;
	}

	.impressum h1 {
		text-align: center;
	}
}

/* -------------------------- PC ---------------*/

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

	header {
		padding-top: 20px;
	}

	#Banner {
		margin: auto;

		max-width: 90%;

	}

	nav {
		margin-top: 20px;
		border: 1px solid #000000;
		border-radius: 5px;
		text-align: right;
		box-shadow: -5px 5px 10px gray;

	}

	nav ul {
		list-style-type: none;
	}

	nav li {
		display: inline;
		margin-right: 40px;
	}

	nav a:hover {
		background-color: blue;
		color: white;
	}

	nav li a {
		text-decoration: none;
	}

	a {
		color: rgba(239, 153, 40, 0.937);
	}

	section {
		max-width: 1250px;
		margin-right: auto;
		margin-left: auto;
	}

	#main {
		max-width: 600px;
		margin-left: 300px;
		padding-top: 150px;
	}

	#Willkommen {
		margin-top: 50px;
		text-align: center;
	}

	#Willkommen h7 {
		color: #4c3be7;
	}

	#Willkommen h3 {
		color: rgb(210, 111, 30)
	}
	
	#Haustüren {
		margin-top: 50px;
		text-align: center;
	}

	#Haustüren h7 {
		color: #4c3be7;
	}
	#Haustüren h2 {
		text-align: center;
		color: rgb(210, 111, 30)
	}
	
	#Endtext {
		text-align: center;
	}

	#Angebot {
		color: rgb(241, 13, 55);
		text-align: center;
	}

	#angebote {
		color: rgb(241, 13, 55);
		text-align: center;
	}

	#bft {
		text-align: center;
		margin-top: 10px;
	}

	#bft p {
		text-align: center;
	}

	/* Leistungsliste */
	#saidbar {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		margin-top: 10px;
		margin-bottom: 10px;
		padding: 10px;
		width: 200px;
		border-right: 1px solid #4c3be7;
		border-top: 1px solid #4c3be7;
		border-radius: 5px;
		box-shadow: -5px 5px 10px gray;
		float: left;
		background-color: rgb(197, 194, 194);
	}

	#saidbar h4 {
		margin: 10px;
	}

	#saidbar h5 {
		margin: 0px;
		color: darkred;
	}

	#saidbar ul {
		margin: 0px;
		padding-left: 30px;
	}

	.saidbar li {
		list-style-type: none;
	}

	#saidbar li a {
		text-decoration: none;
	}

	/* Datenschutz */
	#datenschutz {
		width: 800px;
		margin-right: auto;
		margin-left: auto;
		margin-top: 20px;
		margin-bottom: 20px;
	}

	#datenschutz p {
		font-size: 11px;
		color: gray;
	}

	/* Impressum */
	.impressum {
		margin-right: auto;
		margin-left: auto;
		background: white;
		width: 1000px;
	}

	.impressum p {
		text-align: center;
	}

	.impressum h1 {
		text-align: center;
	}
}

/* -------------------------- Fuß ---------------*/


footer {
	width: 100%;
	background-color: rgb(114, 110, 110);
	border: 1px solid #000000;
	border-radius: 5px;
	clear: both;
	margin-right: auto;
	margin-left: auto;
	margin-top: 20px;
}

footer ul {
	margin-left: 20px;
	float: left;
	list-style: none;
}

footer li {
	margin-right: 15px;
	display: inline;
}

footer li a {
	text-decoration: none;
}

footer li a:hover {
	color: white;
}

footer p {
	text-align: right;
	margin-right: 20px;
	color: rgb(250, 249, 249);
}