* {
	margin					: 0;
	padding					: 0;
	font-family				: Open Sans, sans-serif, sansserif, verdana, arial;
	letter-spacing			: .0625rem;
}

red {
	font-size				: 1.5rem;
	color					: #FD0104;
	line-height				: .5rem;
	letter-spacing			: .0125rem;
}

html {
	scroll-behavior			: smooth;
}

a {
	color					: #FD0104;
	text-decoration			: none;
}

a:hover{
	color					: #FFFFFF;
}

body {
	background-color		: #111111;
	background-position-y	: +8rem;
}

h1, h2, h3, h4 {
	width					: 100%;
}

h1 {
	margin-top				: 1rem;
	margin-left				: 1rem;
	margin-right			: 1rem;
	margin-bottom			: 1rem;
}

h2 {
	font-size				: 1.75rem;
	margin-top				: 0;
	margin-left				: 1rem;
	margin-right			: 0;
	margin-bottom			: 1rem;
}

h3 {
	color					: #FD0104;
	margin-top				: 0rem;
	margin-left				: 1rem;
	margin-right			: 1rem;
	margin-bottom			: 1rem;
}

#header {
	display					: flex;
	position				: fixed;
	top						: 0;
	left					: 0;
	width					: 100%;
	height					: 8rem;
	flex-direction			: row;
	justify-content			: center;
	align-items				: flex-end;
	background				: radial-gradient(circle at 0% 12%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .9) 50%, rgba(159, 19, 19, .8) 65%, rgba(79, 19, 19, .9) 70%, rgba(0, 0, 0, 1) 100%);
	box-shadow				: 0 0 .25rem #F00;
	z-index					: 2;
}

#menu {
	ul {
		display				: flex;
		height				: 2rem;
		li {
			text-decoration	: none;
			font-size		: .8rem;
			letter-spacing	: .1rem;
			font-weight		: 600;
			height			: 100%;
			a {
				color			: #fff;
				height			: 100%;
				display			: block;
				text-transform	: lowercase;
				padding			: .5rem 1rem;
				border-radius	: .25rem .25rem 0 0;
			}
		}
		li:hover {
			a {
				color			: #000;
				background-color : #FFF;
			}
		}
		overflow				: hidden;
	}
	ul ul {
		display 			: block;
		position			: absolute;
		margin				: 4rem;
	}
}

#logo {
	padding-left			: 2rem;
	padding-right			: 2rem;
	img {
		height				: 6rem;
		width				: auto;
	}
}

#breadcrumbs {
	display					: flex;
	width					: 100%;
	height					: 2rem;
	left					: 0;
	top						: 8rem;
	position				: fixed;
	background				: rgba(50, 10, 10, .9);
	border-top				: 1px solid #E00;
	border-bottom			: 1px solid #E00;
	ul {
		max-width			: 1080px;
		display				: flex;
		flex-direction		: row;
		align-items			: center;
		justify-content		: center;
		text-align			: center;
		margin				: 0 auto;
		list-style			: none;
		li {
			text-transform	: uppercase;
			font-size		: .75rem;
			display			: inline;
			padding			: 0 2rem;
		}
	}
}

.anker {
	position				: relative;
	top						: -11rem;
}

#main, 
#content, 
#footer{
    z-index: 1;   /* über dem Overlay */
}

#background-helper {
	position				: fixed;
	top						: 0;
	left					: 0;
	height					: 100%;
	width					: 100%;
	background-color		: rgba(0,0,0,0);
	pointer-events			: none;
	z-index					: 0;
}

#content {
	width					: 100%;
	max-width				: 1080px;
	min-height				: calc(100vh);
	margin					: 0 auto;
	padding					: 10rem 0 2rem 0;
	color					: #fff;
	position				: relative;
}

#content p {
	margin-top				: 0;
	margin-bottom			: 1.25rem;
	font-size				: .9rem;
	letter-spacing			: .075rem;

}

#content img {
}

div.article {
	display					: flex;
	width					: 100%;
	border-top				: 1px solid #FD0104;
	border-bottom			: 1px solid #FD0104;
	margin-bottom			: 5rem;
	ul {
		list-style			: none;
		margin-left			: 1rem;
	}
}


div.article div.article_image {
	display					: flex;
	height					: 100%;
	width					: 50%;
	text-align				: center;
	margin					: auto 0;
	background-color		: rgba(0,0,0,.5);
	padding					: 1rem 1rem;
	img {
		margin				: 1rem 0;
		max-height			: 400px;
		max-width			: 100%;
		width				: auto;
		height				: auto;
	}
}

div.article div.article_content {
	display					: flex;
	flex-direction			: column;
	align-items				: stretch;
	width					: 50%;
	background-color		: rgba(0,0,0,.5);
	padding					: 2rem 0;
	p {
		margin				: 2rem 1rem;
		text-align			: justify;
	}
}

div.article div.article_description {
	display					: flex;
	flex-direction			: column;
	align-items				: stretch;
	width					: 50%;
	background-color		: rgba(0,0,0,.5);
	padding					: 2rem 0;
	p {
		margin				: 2rem 1rem;
		text-align			: justify;
	}
}


.background {
	background-size			: 100% auto;
	background-position		: center;
	background-repeat		: no-repeat;
	background-attachment 	: fixed;
}

.webprojekte {
	background-image		: url('../images/bg_project.png');
}

.emailservice {
	background-image		: url('../images/bg_emailservice.png');
}

.bandprojekt {
	background-image		: url('../images/bg_band.png');
}

.alex {
	background-image		: url('../images/bg_alex.png');
}

.contact {
	background-image		: url('../images/bg_contact.png');
}

#footer {
	position				: fixed;
	bottom					: 0;
	width					: 100%;
	height					: 1rem;
	margin-top				: .25rem;
	text-align				: right;
	padding-right			: 1rem;
	border-top				: 1px dotted #555;
	font-size				: 0.8rem;
	font-weight				: 700;
	background-color		: #000;
	color					: #FFF;
	box-shadow				: 0 0 5px solid #000;
}

#toolbar {
	background				: #000;
	color					: #FFF;
}

table {
	margin					: 2rem;
}

table td:first-child  {
	text-align				: right;
	vertical-align			: top;
}

table td {
	padding					: .5rem .25rem;
}

#placeholder {
	height					: calc(100vh - 15rem);
}