/* gibt Schriftarten vor, welchem an in den entsprechenden Klassen mit "font-family:"auswählen kann. */

@font-face {
	font-family:OpenSans;
	src: url(./Open_Sans/OpenSans-Regular.woff2);
	font-weight:400;
}

@font-face {
	font-family: OpenSans;
	src: url(./Open_Sans/OpenSans-ExtraBold.ttf);
	font-weight: 700;
}

@font-face {
	font-family:OpenSans;
	src: url(./Open_Sans/OpenSans-Light.ttf);
	font-weight: 400;
}

@font-face {
	font-family: Montserrat;
	src: url(./Montserrat/Montserrat-Regular.woff2);
	font-weight: 400;
}

  /* vereinfacht die Berechnung der Größe von Blöcken. Wenn man 200px width angibt, wird es durchgezogen, ganz egal wie groß das Padding in dem Element ist. */

*{
	box-sizing:border-box;
	list-style-type: none;
}

/* display: flex bringt den ganzen header in ein Block, sodass man sie alle zusammen navigieren kann.
   mit align-items: center kann man dann die Suchleiste mit in den center einreihen.
   max-width gibt die maximale größe der Website in pixeln an.
   margin: 0 auto; zentriert den ganzen header */
header{
	display: flex;
	align-items: center;
	max-width: 1198px;
	margin: 0 auto;
	
}

/* margin-right positioniert meine Navigationselemente */

.company-name {
	font-family:OpenSans;
	font-size: 26px;
	font-color: #ff5400;
	font-weight:700;
	margin-right: 64px;
	padding-top: 25px;
	padding-left: 14px;
}

/* margin-left: 39px; lenkt die Navigationselemente aus der Richtung des main-logos aus nach rechts */

.navigation {
	font-color: #818181;
	padding-top: 25px;
}	

/* die erste Px einheit dient dazu die Navigationselemente nach "oben & unten" zu bewegen, die zweite hingegen dient dazu sie mehr auseinander zu kriegen und ebenfalls nach "rechts" zu bewegen */

.navigation a {
	text-decoration:none;
	color: grey;
	font-family:OpenSans;
	margin-right: 25px;
}

/* dient dazu, das die Orangene bar über "Dokumentation" erscheint. Mit padding-top: 29px; kriegt man die Orangene Leiste weiter weg nach oben vom "Dokumentation" */

.navigation a.active {
	border-top:3px solid #ff5400;
	padding: 30px 0px;
	margin-right: 37px;
}

/* position: relative; sorgt dafür, dass das Icon angezeigt wird und margin-left: auto; bringt die Suchleiste an den rechten rand der Website, welcher im header durch max-width: 1183px bestimmt wurde. */

.wrapper {
    position: relative;
	margin-left: auto;
	padding-top: 23px;
  }

/* height: sorgt dafür, das die Suchleiste breiter oder schmaler wird
   width: sorgt dafür das die Suchleiste länger oder kürzer wird.
   border sorgt dafür, das die dunkelgraue border um die Suchleiste verschwindet. */

  .search {
    height: 39px;
    width: 281px;
    background-color: #f5f5f5;
	border: 0px;
	padding: 15px;

}

.button-icon {
	position: absolute;
	right: 9px;
	bottom: 1px;
	border: 0px;
	background-color: #f5f5f5;
}


/* --- INHALT --- */

/* LINKE SPLATE ! ! ! */ 

body {
		margin:0;
}		

#main-wrapper {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
}

#lsb-control {
	font-family: OpenSans;
	padding-top: 57px;
	font-size: 15px;
	max-width: 230px;
	padding-left: 17px;
}

a {
	text-decoration: none;
}

/* RECHTE SPALTE ! ! ! */

#rechte-spalte {
	margin-left: 129px;
	padding-top: 58px;
}

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

li {
	padding-bottom: 1px;
}

p {
	font-size: 18px;
	font-family: OpenSans;
	font-weight: 400;
	line-height: 33px;
	margin-top: 11px;
	color: #7b7b7b;
}


h1 {
	font-family: Montserrat;
	font-size: 40px;
	font-weight: 400;
	margin-bottom: 0;
}

h2 {
	font-family: Montserrat;
	font-weight: 400;
	font-size: 32px;
	margin: 0;
}

h3 {
	margin: 0;
	font-family: montserrat;
	font-weight: 400;
	font-size: 28px;
}

h4 {
	font-weight: 400;
	font-size: 24px;
	font-family: Montserrat;
	margin-top: 0;
	margin-bottom: 7px;
}

/* das ist ein h5 aus der linken sidebar. */
h5 {
	font-weight: 400;
	font-size: 14px;
	color: #727272;
	font-family: Montserrat;
	margin-bottom: 0px;
	padding-top: 6px;
}

/* das ist ein h5 aus der rechten sidebar */
#headline-h5{
	font-family: Montserrat;
	font-weight: 400;
	font-size: 20px;
}

h6 {
	margin-top: 10px;
	font-family: Montserrat;
	font-weight: 400;
	font-size: 14px;
	margin-bottom: 36px;
}
/* h1-h6 Headline */
.hline-box-control {
	margin-top: 3px;
	margin-left: 24px;
	padding: 1px;
}

.bg-color-grey-hline {
	background-color: #f8f8f8;
}

.bg-color-grey-display {
	background-color: #f8f8f8;
}

#h3-control {
	font-family: Montserrat;
	font-weight: 400;
	font-size: 24px;
	padding-top: 18px;
}

/* Display 1-6 Styling */
.display-box-control {
	margin-left: 41px;
}

.display-box-control h1.d1 {
	font-family: Montserrat;
	font-weight: 400;
	font-size: 80px;
	margin-bottom: 10px;
	margin-top: 47	px;
}

.display-box-control h2.d2 {
	font-family: Montserrat;
	font-weight: 400;
	font-size: 72px;
	margin-bottom: 9px;
}

.display-box-control h3.d3 {
	font-family: Montserrat;
	font-weight: 400;
	font-size: 65px;
	margin-bottom: 8px;
}

.display-box-control h4.d4 {
	font-family: Montserrat;
	font-weight: 400;
	font-size: 57px;
	margin-bottom: 3px;
}

.display-box-control h5.d5 {
	font-family: Montserrat;
	font-weight: 400;
	font-size: 49px;
	margin-top: 5px;
	color: black;
}

.display-box-control h6.d6 {
	font-family: Montserrat;
	font-weight: 400;
	font-size: 41px;
	padding-bottom: 37px;
}

.bg-color-grey-leadstyle {
	background-color: #fbfbfb;
}

.leadstyle-control {
	margin-left: 32px;
	margin-top: 52px;
	margin-bottom: 43px;
}

.bg-color-grey-lorem-ipsum {
	background-color: #f8f8f8;
}

.lorem-ipsum-txt {
	padding: 36px 33px;
}

.mltpl-txt-control {

}