<style>
	/*Style für die Suchleiste (margin)*/
	input {
		border-color:black;
		color:black;
		margin-bottom:0.5em;
		text-align:left;
		font-weight:bold;
	}
	/*Style für das Logo*/
	.Logo {
        height:100px;
        margin-right:20px;
	}
	/*Style des footers (damit er immer unten bleibt)*/
	footer {
		position: fixed;/* Hier */
		clear:both;/* Hier */
		float:left;/* Hier */
		width:100%;
		bottom:0;
		text-align: center !important;/* Hier */
		color: #FFF;
		background-color: #eeaf30;
		font-size: 15px !important;
	}
	/*Style für die Horizontale Linie*/
	hr {
		height:40px;
		width:100%;
		background-color:#0070B7;
		margin:0;
		margin-top:0.75em;
		border-color:#0070B7;
	}
	/*Style für ein Listen element (Die Projekte)*/
	li {
		list-style-type:none;
		margin-top:0.15em; /*Jeweils zwischen dem Text Platz lassen*/
		margin-bottom:0.15em; /*Jeweils zwischen dem Text Platz lassen*/
	}
	/*Style des Berichtes -> also den Inhalt der Website in Form eines Divs*/
	.content {
		width:98%;
		height:4000px;
		padding-top:10px;
		margin-left:10px;
		margin-right:20px;
	}
	/*Style des Bodys*/
	body {
		margin: 0; /*Es gibt keinen Rand*/
		overflow-x: hidden; /*Man kann nicht nach rechts oder links scrollen*/
	}
	/*Style für die Einklappbare Liste*/
	.close {
		background-color:#0070B7;
		padding-right:10px;
		margin-top:0;
		padding-bottom:4000px;
	}
	/*Style der Links auf der ganzen Website*/
	a {
		color:white;
		text-decoration:none;
	}
	a:hover {
		color:white;
		text-decoration:underline;
	}
	/*Style der Links des Hagebölling Interview(class="UT")*/
	.UT {
		color:#eeaf30;
		text-decoration:none;
	}
	.UT:hover {
		color:#eeaf30;
		text-decoration:underline;
	}
	/*Style für das Logo und den obigen Text*/
	.topline {
		display:flex;
		letter-spacing:2px;
		vertical-align:middle;
		color:#0070B7;
		font-size:25px;
	}
	/*Ändert die Hintergrundfarbe des Ausklappmenü-Knopfes als Div*/
	.teal {
		background:#0070B7;
	}
	/*Style des buttons*/
	button {
		margin-left:205px;
		background:#0070B7;
		margin-left:5px;
        margin-bottom:5px;
	}
	button:hover {
	    cursor:pointer;
	}
	/*Falls die Bilschrimgröße kleiner ist als 800*/
	@media only screen and (min-width:50em) {
		/*Passt der container die jeweiligen Textelemente an*/
        .container{
            column-count:2;
            font-size: 20px;
            clear:both;
            width:100%;
            text-align: justify;
    	}
    }
	/*Style der Überschriften -> Bericht*/
    h1 {
		margin-top:0;
        text-decoration:underline; /*Unterstreicht den Text*/
        border: black solid; /*Fügt einen Schwarzen Rand hinzu*/
        padding:0.25em;
        text-align: center; /*Zentriert den Text*/
        background-color:#eeaf30;
    }
	/*Container als Klasse eines Divs für mehrere Bilder*/
	.img {
		display:flex; /*Ermöglicht es mehrere Elemente in eine Spalte einzufügen*/
		text-align:center;
		justify-content:center; /* Die Bilder werden in der Mitte des Containers Zentriert*/
		align-items:center; /*Lässt zwischen den Bildern Platz und sortiert sie*/
	}
</style>