@charset "UTF-8";
/* CSS Document */





html {
	height: 100%;
	font-size: 1rem;
}

body {
  font-size: 1rem;
  font-family: 'Dosis', sans-serif;
  height: 100%;
  margin: 0px;
 }

.main-subcontent {
  padding-top: 40px;
  margin-left: auto;
  margin-right: auto;
	text-align: center;
}

.main-subcontent h3 {
	font-family: "myriad-pro-semi-condensed";
	font-weight: 700;
	margin-bottom: 0px;
	font-size: 1.3rem;
}

.main-subcontent h2 {
	font-family: "myriad-pro-semi-condensed";
	font-weight: 700;
	color: #f28900;
	font-size: 1.8
}

.main-subcontent p {
	font-family: "myriad-pro-semi-condensed";
	font-weight: 400;
	margin-top: 0px;
	font-size: 1 rem;
}

.button {
	display: block;
	margin-top: 10px;
	text-decoration: none;
	color: white;
	background-color: #f28900;
	padding: 10px;
	font-weight: bold;
	text-align: center;
	border-radius: 20px;
}

.button:hover {
	background-color: #ff7337;
}

.impressum {
	text-align: left;
	padding-top: 20px;	
}

.impressum p {
	font-size: 0.5rem;
	margin-top: 0px;
}



.adress {
	display: block;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
		
}

.adress h1 {
	font-family: "myriad-pro-semi-condensed";
	font-size: 1.8rem;
	font-weight: 400;
	color: white;
	margin-top: 30px;
	margin-bottom: 0px;
}
.adress p {
	font-family: "myriad-pro-semi-condensed";
	font-weight: 400;
	font-size: 1.2rem;
	font-weihgt: 300;
	color: black;
	margin-top: 10px;
	}

@media (max-width:750px) {
	
	
	.main-subcontent {
		background-color:  #f28900;
		padding-bottom: 5rem;
	}
	
	.main-subcontent__sub,
	.texte-button__texte {
		display: none;		
	}
	
	.button {
	display: block;
	margin-top: 0px;
	text-decoration: none;
	color:  #f28900;
	background-color: white;
	padding: 10px;
	font-weight: bold;
	text-align: center;
	border-radius: 20px;
	margin: 0px 5rem;
	}
	
	.button:hover {
		background-color: #EEEEEE;
	}
	
	.adress-container {
		background-color: #f28900;
		padding: 5rem 5rem 1rem 5rem;
		}
	.allcontent {
		display: flex;
		flex-direction: column-reverse;
		height: 100%;
		}
}


/*Ab hier beginnt Responsive Programmierung für Desktop*/
@media (min-width: 750px) {
  body {
    background-image: none;
	  }	 

	.allcontent {
		display: flex;
		height: 100%;
		
	}
		
	.logo-container {
 		padding-top: 2rem;
  		margin-left: 0px;
  		margin-right: 0px;
		width: 12rem;
	
		}
	
	.logo {
	width: 12rem;
	}
	

	/*Flexbox: "width" und "height" Befehle ersetzen durch flex*/
 	.main-content {
		/*width: 45%;*/
		flex: 1 0 0px;
		padding-left: 2rem;
		padding-right: 2rem;
		text-align: left;
		
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		}
	
	.adress {
		text-align: center;
		padding-top: 0px;
		padding-bottom: 1.2rem;
		margin-left: 10rem;
		margin-right: 2rem;
		}
	
	.adress-container {
		flex: 1 0 0px;
		background-image: url("img/HG_orange.svg");
		background-repeat: no-repeat;
		background-size: cover;
		display: flex;
		align-items: center;
		}
		
		.orangetree {
			display: none;
		}
	
  }





@media (min-width: 1100px){
.texte-button__button {
		background-position: 100% 50%;
		background-size: auto 100%;
		padding-right: 1rem;
	}

}

@media (min-width: 1250px){
/*im folgenden bezieht sich die Vergrößerung auf alle "html" Elemente*/
	html {
		font-size: 1.25rem;
	}
	
	.allcontent {
		height: 100%;
	}
	
	.main-subcontent {
		display: flex;
		align-items: flex-end;
		justify-content: center;
		
		
		padding-bottom: 6rem;
			
	}
	
	.texte-button {
		min-width: 40%;
	}
	
	.texte-button__button {
		flex: 3 0 250px;
	}
	
	.orangetree {
	display:contents;
}
		
}


/* CSS-Hack für Internet Explorer 11 (aufwärts). Diese Hacks braucht man nur für IE und findet man mit google recherche. Unten sage ich, dass das Hintgrundbild "der Pfeil" beim IE nicht angezeigt werden soll*/
_:-ms-fullscreen, :root .texte {
	background-image: none;
}