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


/* border-box */

html {
	box-sizing: border-box;
}

*, *:before, *:after {
	box-sizing: inherit;
}

h1, h2, h4, h5, h6,
p, ul, ol, blockquote {
	margin-top: 0;
	margin-bottom: 1em;
}

/* Body */

body {
	background-color: rgb(235, 235, 235);
	min-width: 400px;
	max-width: 1000px;
	margin: auto;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
}

h2 {
	color: white;
}


/* Logo und Slogan */


h1 {
	background-color: rgb(41, 41, 41);
	padding: 0.5em 2em 0.5em 2em;
	margin-bottom: 0;
}

.site-slogan {
	background-color: rgb(41, 41, 41);
	padding: 1em;
	margin-top: 0;
	margin-bottom: 0;
	color: white;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.main-header {
	box-shadow: 6px 5px 10px rgba(0, 0, 0, 0.3);
}

/* Navigation */


.main-nav {
	padding: 0;
	margin: 0;
	box-shadow: 6px 5px 10px rgba(0, 0, 0, 0.3);
}

.main-nav-list {
	display: flex;
	padding: 0;
	margin: 0;
	flex-wrap: wrap;
}

.main-nav-list li {
	list-style: none;
	font-size: 18px;
}

.main-nav-list a:focus,
.main-nav-list a:hover {
	background: rgb(119, 11, 11);
	color: white;
	transition: 0.3s;
}

.main-nav-list a:active {
	background-color: rgb(255, 121, 73);
	color: white;
}

.main-nav-list a {
	display: block;
	text-decoration: none;
	min-width: 200px;
	text-align: center;
	background-color: rgb(216, 64, 64);
	color: white;
	padding: 1rem;
}


.main-nav-list a.you-are-here {
	background-color: rgb(119, 11, 11);
	color: white;
}



/* STARTSEITE */

/* Main */

.banner {
	width: 1000px;
	height: 240px;
	position: relative;
	margin-top: 1em;
	box-shadow: 6px 5px 10px rgba(0, 0, 0, 0.2);
}

.banner:hover .banner-s {
	width: 1000px;
}

.banner img {
	display: block;
	width: 1000px;
	height: 240px;
}

.banner-s {
	width: 0;
	height: 240px;
	background-color: rgba(65, 65, 65, 0.5);
	position: absolute;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	transition: 0.3s ease;
}

.banner-s h2 {
	font-size: 3em;
	color: white;
	font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}


.main-intro-p {
	background-color: rgb(65, 65, 65);
	color: white;
	padding: 1em;
	margin: 0em 0 1em 0;
	border-top: 5px solid rgb(216, 64, 64);
	box-shadow: 6px 5px 10px rgba(0, 0, 0, 0.3);
}

.links {
	color: white;
	cursor: pointer;
}

.links:hover {
	color: rgb(202, 22, 22);
}

.links:active {
	color: rgb(255, 121, 73);
}

/* Menüboxen */


.menübox {
	display: inline-block;
}

.menübox {
	width: 230px;
	height: 306px;
	background-color: rgb(65, 65, 65);
	box-shadow: 6px 5px 10px rgba(0, 0, 0, 0.3);
	margin: 1em 0 1em 0;
}
	

.menübox-icon {
	padding-top: 4px;
}

.menübox-icon a:hover {
	cursor: pointer;
}

.menübox-titel {
	background-color: rgb(41, 41, 41);
	color: white;
	border-top: 4px solid rgb(216, 64, 64);
}

.menübox-titel:hover {
	color: white;
	background-color: rgb(119, 11, 11);
	cursor: pointer;
	transition: 0.3s;
}

.menübox-titel a {
	color: white;
	text-decoration: none;
}

#menübox-klicker {
	display: block;
	padding: 18.7167px 0 18.7167px 0; /* Padding der Titel Boxen */
}


/* News auf Main Seite */

.main-content-headlines h2 {
	background-color: rgb(41, 41, 41);
    padding: 0.5em;
    margin-top: 1em;
	border-bottom: 10px solid rgb(216, 64, 64);
	font-size: 2em;
	box-shadow: 6px 5px 10px rgba(0, 0, 0, 0.3);
}

.main-news-article {
	background-color: rgb(65, 65, 65);
	color: white;
	padding-bottom: 0.5em;
	box-shadow: 6px 5px 10px rgba(0, 0, 0, 0.3);
}

.main-news-article h3 {
	background-color: rgb(41, 41, 41);
	color: white;
    padding: 0.5em;
    margin-top: 1em;
	border-bottom: 5px solid rgb(216, 64, 64);
}

.autor {
	font-size: 11px;
	margin: -1em 0 0 1em;
	text-align: left !important;

}



.main-corona {
	background-color: rgb(41, 41, 41);
	color: white;
	padding: 2em 0;
	border-top: 10px solid rgb(216, 64, 64);
	box-shadow: 6px 5px 10px rgba(0, 0, 0, 0.3);
}

.stayhome {
	color: white;
	font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
	font-size: 5em;
	margin-bottom: 0.5rem;

	
}

.main-corona img {
	width: 20%;
	height: 20%;
	margin: 0;
}


/* Footer */

.copyright {
	text-align: center;
    color: white;
    font-size: 12px;
    padding: 1em 0.5em 0.15em 0.5em;
	margin: 2em 0 1em 0;

}

.to-up {
	background-color: rgb(41, 41, 41);
	width: 1000px;
	padding: 0.5em;
	margin-top: 2em;
	box-shadow: 6px 5px 10px rgba(0, 0, 0, 0.3);
}

.to-up a {
	color: white;
	text-decoration: none;
}

.to-up:hover {
	background-color: rgb(119, 11, 11);
	color: white;
	cursor: pointer;
	transition: 0.3s;
}

#top-klicker {
	display: block;
}


/* Über Mich */

.ueber-mich-karriere,
.ueber-mich-vorstellung {
    background-color: rgb(65, 65, 65);
	padding-bottom: 0.5em;
	box-shadow: 6px 5px 10px rgba(0, 0, 0, 0.3);
}

.ueber-mich-karriere h2,
.ueber-mich-vorstellung h2 {
    background-color: rgb(41, 41, 41);
    padding: 0.5em;
    margin-top: 1em;
    border-bottom: 5px solid rgb(216, 64, 64)
}

.ueber-mich-karriere p,
.ueber-mich-vorstellung p {
	color: white;
	
}

.ueber-mich-text {
	background-color: rgb(65, 65, 65);
	padding: 1em;
	margin: 1em;
	text-align: left;
}

.myself {
	text-align: right;
	width: 17%;
	height: 17%;
	margin: 0 2em 1em 1em;
	float: right;
	border: solid 4px rgb(41, 41, 41);
	box-shadow: 6px 5px 10px rgba(0, 0, 0, 0.3);
}




/* Videos und Projekte */


.video {
	background-color: rgb(65, 65, 65);
	padding: 1em;
	margin: 0em 1em 1em 0;
	text-align: center;
}

.videos h3 {
	background-color: rgb(41, 41, 41);
	color: white;
    padding: 0.5em;
    margin: 2em 0 0 0;
    border-bottom: 5px solid rgb(216, 64, 64)
}


/* News */

.news-text {
	margin: 1em 3em 1em 3em;
}





/* Kontakt */


address {
	font-style: normal;
	color: white;
	line-height: 1.5em;
}

.kontakt-content {
    text-align: center;
}

label {
	display: block;
	color: white;
}



.kontaktdaten {
    background-color: rgb(65, 65, 65);
	padding-bottom: 0.5em;
	box-shadow: 6px 5px 10px rgba(0, 0, 0, 0.3);
}

.kontaktdaten h2 {
    background-color: rgb(41, 41, 41);
    padding: 0.5em;
    margin-top: 1em;
    border-bottom: 5px solid rgb(216, 64, 64)
}

.kontaktdaten address {
    padding-bottom: 1em;
}

.kontaktformular div {
    margin-bottom: 1em
}

.kontaktformular-abschnitt h2 {
    background-color: rgb(41, 41, 41);
    padding: 0.5em;
    margin-top: 1em;
    margin-bottom: 0em;
	border-bottom: 5px solid rgb(216, 64, 64);
	box-shadow: 6px 5px 10px rgba(0, 0, 0, 0.3);
}

.kontaktformular {
    background-color: rgb(65, 65, 65);
	padding: 1em;
	box-shadow: 6px 5px 10px rgba(0, 0, 0, 0.3);
}

.kontakt-button {
	border: 2px solid rgb(216, 64, 64);
    background: none;
    padding: 10px 20px;
    font-size: 20px;
    cursor: pointer;
    margin: 20px 0px 5px 0px;
    color: rgb(216, 64, 64);
    transition: 0.3s;
}

.kontakt-button:hover {
	border: 2px solid white;
    color: white;
}








/* 

.main-nav {
	background-color: rgb(216, 64, 64);
	padding: 16px 16px 15px 16px;
	box-shadow: 6px 5px 10px rgba(0, 0, 0, 0.3);
	position: sticky;
}

.main-nav-list {
	margin: 0;
	list-style-type: none;
}

.main-nav-list li {
	display: inline;
	font-size: 18px;
	padding: 16px 0 16px 0;
}

.main-nav-list li:hover {
	background-color: rgb(119, 11, 11);
}

.main-nav-list a {
	text-decoration: none;
	padding: 16px 20px 16px 20px;
	color: white;
}

a.you-are-here {
	background-color: rgb(119, 11, 11);
	text-decoration: underline;
	color: white;
	padding: 16px 20px 16px 20px;
} 

*/