/* = = = = = = = = = = = = = = = = = Datei format.css = = = = = = = = = = = = = = = = = = = = = = = = = */


/* ############################################################ */
/* Allgemein 													*/
/* ############################################################ */

*, *:before, *:after {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

html, body {
	font-family: 'open_sanslight',georgia, tahoma, arial, Verdana, Segoe, 'Open Sans',helvetica,roboto ,sans-serif;
	font-size: 62.5%;
	line-height: 1.5;
	font-weight: normal;
	min-height: 100%;
}

body {
	overflow-x: hidden;
	background: #222222;
	color: #B0BEC5;
	font-size: 1.7rem;
	margin: 0 auto;
	background-image: url(../images/header.jpg);
	background-position: 50% 0%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
}


/* andere Zeilenabstände, Absatz */
.content br {
	line-height: .5;
}


/* Überschriften */

h1, h2, h3, h4, h5 {
	color: #B0BEC5;
	text-align: left;
	letter-spacing: 0px;
	font-weight: bold;
	text-transform: none;
}

h1 {
	font-size: 3.5rem;
	line-height: 3.7rem;
	margin-top: 0rem;
	margin-bottom: 5.2rem;
}

h2 {
	font-size: 2.5rem;
	line-height: 3rem;
	margin-top: 2rem;
	margin-bottom: 3.5rem;
}


h3 {
	font-size: 1.9rem;
	line-height: 2.3rem;
	margin-top: 1rem;
	margin-bottom: 2.5rem;
	letter-spacing: 0rem;
}

h4 {
	font-size: 1.8rem;
	line-height: 2rem;
	margin-top: 1rem;
	margin-bottom: 2rem;
	letter-spacing: 0rem;
}


/* Allgemeine Links  */

a {
	background: transparent;
	color: #B0BEC5;
	text-decoration: underline;
}

a:hover {
	color: #B0BEC5;
	text-decoration: none;
}



/* ############################################################ */
/* Speziell														*/
/* ############################################################ */

.container_haupt {
	height: 100%;
	margin: 0 auto;
	padding: 0;
	width: 100%;
}


.container-galerie {
    margin-top: 0em;
}


/* Bilder anpassen der Grösse  */
/*
Wenn Sie eigene einzelne Bilder einbauen, unabhängig von unserem Bilderstystem,
dann werden diese Bilder maximal (max-width) so gross wie die Original-Abmessungen des Bildes
bwz. des umschliessenden Containers wenn vorhanden.
*/

img {
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}




/* = = = = = = = = = =  = = = = = = = = = =  = = = = = = = = = = = = = = = = = = = = */
/*  GRID-SYSTEM #1 - mit DISPLAY:INLINE-BLOCK 										 */
/*  fuer Boxen und Bilder 															 */
/* = = = = = = = = = =  = = = = = = = = = =  = = = = = = = = = = = = = = = = = = = = */

.wrapper-box {
	display: block;
	text-align: center;
	padding: 0rem;
}

.box {
	display: inline-block;
	width: 100%;
	vertical-align: top;
	padding: .4rem;
	margin: 0 -.2rem 0 -.2rem ;/* Ausgleich ( minus-margin) für INLINE-BLOCK-WHITESPACE-BUG*/
}

.box-1_of_1 ,
.box-1_of_2 ,
.box-1_of_3 ,
.box-1_of_4 {
	width: 100%;
}

.box img,
.box a img {
	display: block;
	box-shadow: 0 0 1px #666;
	width: 100%;
	height: auto;
	border: solid 5px #000;
}


/* ############################################################ */
/* Logo Bereich 												*/
/* ############################################################ */

.section-logo {
	display: table;
	width: 100%;
	margin: 0;
	padding: 0;
}

.logo-1  {
	display: inline-block;
	width: 100%;
	margin: 0 ;
	text-align: left;
	padding: 4vh 6vw;
}

.logo-2 {
	display: block;
	overflow-x: hidden;
	width: 100%;
	background: #999999; /* IE9 */
	background: linear-gradient(to right, #999999, rgba(0,0,0,.3), #666666 );
	border: 1px solid #0F0F0F;
	box-shadow: inset 0px 0px 10px  rgba(255,255,255,.4);
	margin: 0 ;
	padding: 4vh 6vw;
	text-align: center;
	position: relative;
}

.logo-2 .top-box-filter {
	display: block;
	position: absolute;
	left: -100%;
	height: 100%;
	width: 200px;
	margin: 0;
	background: rgba(255,255,255,.5);
	opacity: 0.8;
	box-shadow: inset 0px 0px  20px white;
	animation: shine-effect 30s 1s infinite;
}

.ueberschrift-text {
	color: #FFF;
	text-decoration: none;	
}

/* name */

#name {
	display: block;
	background: transparent;
	color: #fff;
	text-shadow: 0 0px 1px #000;
	font-weight: bold;
	font-size: 2.2rem;
	line-height: 2.6rem;
	padding: 0rem ;
	text-shadow: 4px 4px 6px #000;
}

#name-home {
	display: block;
	background: transparent;
	color: #fff;
	text-shadow: 0 0px 1px #000;
	font-weight: bold;
	font-size: 2.2rem;
	line-height: 2.6rem;
	padding: 0rem ;
	text-shadow: 4px 4px 6px #000;
}

#name-news {
	display: block;
	background: transparent;
	color: #fff;
	text-shadow: 0 0px 1px #000;
	font-weight: bold;
	font-size: 2.2rem;
	line-height: 2.6rem;
	padding: 0rem ;
	text-shadow: 4px 4px 6px #000;
}

#name-hobbys {
	display: block;
	background: transparent;
	color: #fff;
	text-shadow: 0 0px 1px #000;
	font-weight: bold;
	font-size: 2.2rem;
	line-height: 2.6rem;
	padding: 0rem ;
	text-shadow: 4px 4px 6px #000;
}

#name-galerie {
	display: block;
	background: transparent;
	color: #fff;
	text-shadow: 0 0px 1px #000;
	font-weight: bold;
	font-size: 2.2rem;
	line-height: 2.6rem;
	padding: 0rem ;
	text-shadow: 4px 4px 6px #000;
}

#name-hp-history {
	display: block;
	background: transparent;
	color: #fff;
	text-shadow: 0 0px 1px #000;
	font-weight: bold;
	font-size: 2.2rem;
	line-height: 2.6rem;
	padding: 0rem ;
	text-shadow: 4px 4px 6px #000;
}

#name-projekte {
	display: block;
	background: transparent;
	color: #fff;
	text-shadow: 0 0px 1px #000;
	font-weight: bold;
	font-size: 2.2rem;
	line-height: 2.6rem;
	padding: 0rem ;
	text-shadow: 4px 4px 6px #000;
}

#name-pc-support {
	display: block;
	background: transparent;
	color: #fff;
	text-shadow: 0 0px 1px #000;
	font-weight: bold;
	font-size: 2.2rem;
	line-height: 2.6rem;
	padding: 0rem ;
	text-shadow: 4px 4px 6px #000;
}

#name-downloads {
	display: block;
	background: transparent;
	color: #fff;
	text-shadow: 0 0px 1px #000;
	font-weight: bold;
	font-size: 2.2rem;
	line-height: 2.6rem;
	padding: 0rem ;
	text-shadow: 4px 4px 6px #000;
}

#name-impressum {
	display: block;
	background: transparent;
	color: #fff;
	text-shadow: 0 0px 1px #000;
	font-weight: bold;
	font-size: 2.2rem;
	line-height: 2.6rem;
	padding: 0rem ;
	text-shadow: 4px 4px 6px #000;
}

#name-datenschutz {
	display: block;
	background: transparent;
	color: #fff;
	text-shadow: 0 0px 1px #000;
	font-weight: bold;
	font-size: 2.2rem;
	line-height: 2.6rem;
	padding: 0rem ;
	text-shadow: 4px 4px 6px #000;
}

#name-disclaimer {
	display: block;
	background: transparent;
	color: #fff;
	text-shadow: 0 0px 1px #000;
	font-weight: bold;
	font-size: 2.2rem;
	line-height: 2.6rem;
	padding: 0rem ;
	text-shadow: 4px 4px 6px #000;
}


#name span {
	font-size: 1.7rem;
	font-style: normal;
	color: #fff;
}

#name-home span {
	font-size: 1.7rem;
	font-style: normal;
	color: #fff;
}

#name-news span {
	font-size: 1.7rem;
	font-style: normal;
	color: #fff;
}

#name-hobbys span {
	font-size: 1.7rem;
	font-style: normal;
	color: #fff;
}

#name-galerie span {
	font-size: 1.7rem;
	font-style: normal;
	color: #fff;
}

#name-hp-history span {
	font-size: 1.7rem;
	font-style: normal;
	color: #fff;
}

#name-projekte span {
	font-size: 1.7rem;
	font-style: normal;
	color: #fff;
}

#name-pc-support span {
	font-size: 1.7rem;
	font-style: normal;
	color: #fff;
}

#name-downloads span {
	font-size: 1.7rem;
	font-style: normal;
	color: #fff;
}

#name-impressum span {
	font-size: 1.7rem;
	font-style: normal;
	color: #fff;
}

#name-datenschutz span {
	font-size: 1.7rem;
	font-style: normal;
	color: #fff;
}

#name-disclaimer span {
	font-size: 1.7rem;
	font-style: normal;
	color: #fff;
}


/* seitentitel - z.b.  -home- */
#name b {
	text-align: center;
	display: block;
	font-size: 2.2rem;
	text-transform: uppercase;
	letter-spacing: 1px;
}

#name-home b {
	text-align: center;
	display: block;
	font-size: 2.2rem;
	text-transform: uppercase;
	letter-spacing: 1px;
}

#name-news b {
	text-align: center;
	display: block;
	font-size: 2.2rem;
	text-transform: uppercase;
	letter-spacing: 1px;
}

#name-hobbys b {
	text-align: center;
	display: block;
	font-size: 2.2rem;
	text-transform: uppercase;
	letter-spacing: 1px;
}

#name-galerie b {
	text-align: center;
	display: block;
	font-size: 2.2rem;
	text-transform: uppercase;
	letter-spacing: 1px;
}

#name-hp-history b {
	text-align: center;
	display: block;
	font-size: 2.2rem;
	text-transform: uppercase;
	letter-spacing: 1px;
}

#name-projekte b {
	text-align: center;
	display: block;
	font-size: 2.2rem;
	text-transform: uppercase;
	letter-spacing: 1px;
}

#name-pc-support b {
	text-align: center;
	display: block;
	font-size: 2.2rem;
	text-transform: uppercase;
	letter-spacing: 1px;
}

#name-downloads b {
	text-align: center;
	display: block;
	font-size: 2.2rem;
	text-transform: uppercase;
	letter-spacing: 1px;
}

#name-impressum b {
	text-align: center;
	display: block;
	font-size: 2.2rem;
	text-transform: uppercase;
	letter-spacing: 1px;
}

#name-datenschutz b {
	text-align: center;
	display: block;
	font-size: 2.2rem;
	text-transform: uppercase;
	letter-spacing: 1px;
}

#name-disclaimer b {
	text-align: center;
	display: block;
	font-size: 2.2rem;
	text-transform: uppercase;
	letter-spacing: 1px;
}


/* icon vor dem seitentitel*/
#name b:before {
	display: none;
	font-size: 2.0rem;
	font-family: 'Font Awesome 5 Free'; /* - 'Font Awesome 5 Free' for Regular and Solid symbols;
										 - 'Font Awesome 5 Brands' for Brands symbols. */
	font-weight: 900;/*  Weight of the font (mandatory)
						 - 400 for Regular and Brands symbols;
						 - 900 for Solid symbols. */
	content: "\f11c";
	font-style: normal;
	text-decoration: none;
	color: #FFFFFF;
	text-shadow: 0 0 1px #000000;
	padding: 0rem;
	margin: 0 10px 0 0;
	width: 4rem;
	height: 3rem;
	line-height: 3rem;
	background: black;
	border-radius: 4px;
	text-align: center;
	vertical-align: bottom;
}

#name-home b:before {
	display: none;
	font-size: 2.0rem;
	font-family: 'Font Awesome 5 Free'; /* - 'Font Awesome 5 Free' for Regular and Solid symbols;
										 - 'Font Awesome 5 Brands' for Brands symbols. */
	font-weight: 900;/*  Weight of the font (mandatory)
						 - 400 for Regular and Brands symbols;
						 - 900 for Solid symbols. */
	content: "\f015";
	font-style: normal;
	text-decoration: none;
	color: #FFFFFF;
	text-shadow: 0 0 1px #000000;
	padding: 0rem;
	margin: 0 10px 0 0;
	width: 4rem;
	height: 3rem;
	line-height: 3rem;
	background: black;
	border-radius: 4px;
	text-align: center;
	vertical-align: bottom;
}

#name-news b:before {
	display: none;
	font-size: 2.0rem;
	font-family: 'Font Awesome 5 Free'; /* - 'Font Awesome 5 Free' for Regular and Solid symbols;
										 - 'Font Awesome 5 Brands' for Brands symbols. */
	font-weight: 900;/*  Weight of the font (mandatory)
						 - 400 for Regular and Brands symbols;
						 - 900 for Solid symbols. */
	content: "\f1ea";
	font-style: normal;
	text-decoration: none;
	color: #FFFFFF;
	text-shadow: 0 0 1px #000000;
	padding: 0rem;
	margin: 0 10px 0 0;
	width: 4rem;
	height: 3rem;
	line-height: 3rem;
	background: black;
	border-radius: 4px;
	text-align: center;
	vertical-align: bottom;
}

#name-hobbys b:before {
	display: none;
	font-size: 2.0rem;
	font-family: 'Font Awesome 5 Free'; /* - 'Font Awesome 5 Free' for Regular and Solid symbols;
										 - 'Font Awesome 5 Brands' for Brands symbols. */
	font-weight: 900;/*  Weight of the font (mandatory)
						 - 400 for Regular and Brands symbols;
						 - 900 for Solid symbols. */
	content: "\f1b9";
	font-style: normal;
	text-decoration: none;
	color: #FFFFFF;
	text-shadow: 0 0 1px #000000;
	padding: 0rem;
	margin: 0 10px 0 0;
	width: 4rem;
	height: 3rem;
	line-height: 3rem;
	background: black;
	border-radius: 4px;
	text-align: center;
	vertical-align: bottom;
}

#name-galerie b:before {
	display: none;
	font-size: 2.0rem;
	font-family: 'Font Awesome 5 Free'; /* - 'Font Awesome 5 Free' for Regular and Solid symbols;
										 - 'Font Awesome 5 Brands' for Brands symbols. */
	font-weight: 900;/*  Weight of the font (mandatory)
						 - 400 for Regular and Brands symbols;
						 - 900 for Solid symbols. */
	content: "\f03e";
	font-style: normal;
	text-decoration: none;
	color: #FFFFFF;
	text-shadow: 0 0 1px #000000;
	padding: 0rem;
	margin: 0 10px 0 0;
	width: 4rem;
	height: 3rem;
	line-height: 3rem;
	background: black;
	border-radius: 4px;
	text-align: center;
	vertical-align: bottom;
}

#name-hp-history b:before {
	display: none;
	font-size: 2.0rem;
	font-family: 'Font Awesome 5 Free'; /* - 'Font Awesome 5 Free' for Regular and Solid symbols;
										 - 'Font Awesome 5 Brands' for Brands symbols. */
	font-weight: 900;/*  Weight of the font (mandatory)
						 - 400 for Regular and Brands symbols;
						 - 900 for Solid symbols. */
	content: "\f1da";
	font-style: normal;
	text-decoration: none;
	color: #FFFFFF;
	text-shadow: 0 0 1px #000000;
	padding: 0rem;
	margin: 0 10px 0 0;
	width: 4rem;
	height: 3rem;
	line-height: 3rem;
	background: black;
	border-radius: 4px;
	text-align: center;
	vertical-align: bottom;
}

#name-projekte b:before {
	display: none;
	font-size: 2.0rem;
	font-family: 'Font Awesome 5 Free'; /* - 'Font Awesome 5 Free' for Regular and Solid symbols;
										 - 'Font Awesome 5 Brands' for Brands symbols. */
	font-weight: 900;/*  Weight of the font (mandatory)
						 - 400 for Regular and Brands symbols;
						 - 900 for Solid symbols. */
	content: "\f542";
	font-style: normal;
	text-decoration: none;
	color: #FFFFFF;
	text-shadow: 0 0 1px #000000;
	padding: 0rem;
	margin: 0 10px 0 0;
	width: 4rem;
	height: 3rem;
	line-height: 3rem;
	background: black;
	border-radius: 4px;
	text-align: center;
	vertical-align: bottom;
}

#name-pc-support b:before {
	display: none;
	font-size: 2.0rem;
	font-family: 'Font Awesome 5 Free'; /* - 'Font Awesome 5 Free' for Regular and Solid symbols;
										 - 'Font Awesome 5 Brands' for Brands symbols. */
	font-weight: 900;/*  Weight of the font (mandatory)
						 - 400 for Regular and Brands symbols;
						 - 900 for Solid symbols. */
	content: "\f590";
	font-style: normal;
	text-decoration: none;
	color: #FFFFFF;
	text-shadow: 0 0 1px #000000;
	padding: 0rem;
	margin: 0 10px 0 0;
	width: 4rem;
	height: 3rem;
	line-height: 3rem;
	background: black;
	border-radius: 4px;
	text-align: center;
	vertical-align: bottom;
}

#name-downloads b:before {
	display: none;
	font-size: 2.0rem;
	font-family: 'Font Awesome 5 Free'; /* - 'Font Awesome 5 Free' for Regular and Solid symbols;
										 - 'Font Awesome 5 Brands' for Brands symbols. */
	font-weight: 900;/*  Weight of the font (mandatory)
						 - 400 for Regular and Brands symbols;
						 - 900 for Solid symbols. */
	content: "\f019";
	font-style: normal;
	text-decoration: none;
	color: #FFFFFF;
	text-shadow: 0 0 1px #000000;
	padding: 0rem;
	margin: 0 10px 0 0;
	width: 4rem;
	height: 3rem;
	line-height: 3rem;
	background: black;
	border-radius: 4px;
	text-align: center;
	vertical-align: bottom;
}

#name-impressum b:before {
	display: none;
	font-size: 2.0rem;
	font-family: 'Font Awesome 5 Free'; /* - 'Font Awesome 5 Free' for Regular and Solid symbols;
										 - 'Font Awesome 5 Brands' for Brands symbols. */
	font-weight: 900;/*  Weight of the font (mandatory)
						 - 400 for Regular and Brands symbols;
						 - 900 for Solid symbols. */
	content: "\f2bb";
	font-style: normal;
	text-decoration: none;
	color: #FFFFFF;
	text-shadow: 0 0 1px #000000;
	padding: 0rem;
	margin: 0 10px 0 0;
	width: 4rem;
	height: 3rem;
	line-height: 3rem;
	background: black;
	border-radius: 4px;
	text-align: center;
	vertical-align: bottom;
}

#name-datenschutz b:before {
	display: none;
	font-size: 2.0rem;
	font-family: 'Font Awesome 5 Free'; /* - 'Font Awesome 5 Free' for Regular and Solid symbols;
										 - 'Font Awesome 5 Brands' for Brands symbols. */
	font-weight: 900;/*  Weight of the font (mandatory)
						 - 400 for Regular and Brands symbols;
						 - 900 for Solid symbols. */
	content: "\f3ed";
	font-style: normal;
	text-decoration: none;
	color: #FFFFFF;
	text-shadow: 0 0 1px #000000;
	padding: 0rem;
	margin: 0 10px 0 0;
	width: 4rem;
	height: 3rem;
	line-height: 3rem;
	background: black;
	border-radius: 4px;
	text-align: center;
	vertical-align: bottom;
}

#name-disclaimer b:before {
	display: none;
	font-size: 2.0rem;
	font-family: 'Font Awesome 5 Free'; /* - 'Font Awesome 5 Free' for Regular and Solid symbols;
										 - 'Font Awesome 5 Brands' for Brands symbols. */
	font-weight: 900;/*  Weight of the font (mandatory)
						 - 400 for Regular and Brands symbols;
						 - 900 for Solid symbols. */
	content: "\f022";
	font-style: normal;
	text-decoration: none;
	color: #FFFFFF;
	text-shadow: 0 0 1px #000000;
	padding: 0rem;
	margin: 0 10px 0 0;
	width: 4rem;
	height: 3rem;
	line-height: 3rem;
	background: black;
	border-radius: 4px;
	text-align: center;
	vertical-align: bottom;
}


/* ############################################################ */
/* Bereich Content 												*/
/* ############################################################ */

.section-content {
	display: table;
	width: 100%;
	margin: 0;
	padding: 0;
	background: #222222;/* IE9*/
	background: radial-gradient(circle at 30% -15%, rgba(0,0,0,.6) 400px,#222222  1000px, #222222 1200px);
}

.section-content-galerie {
	margin-bottom: -30px;
}

.section-content-galerie a {
	text-decoration: none;
}
		
.section-content-galerie a:hover {
	text-decoration: underline;
}

.section-content-galerie-view {
	margin-bottom: -20px;
}


.section-content-downloads {
	margin-bottom: -8px;
}

.section-content-downloads a {
	text-decoration: none;
}
		
.section-content-downloads a:hover {
	text-decoration: none;
}

.section-content-downloads ul li {
	display: block;
	list-style-type: none;
	overflow: hidden;
	padding: 8px;
}

.section-content-downloads ul li:hover {
	background-color: #000;
}

.section-content-downloads ul#header li {
	font-weight: bold;
	border-bottom: 1px solid #cccccc;
}

.section-content-downloads ul#header li:hover {
	background-color: transparent;
}
				
.section-content-downloads ul #header li * {
	color: #FFF;
}

.section-content-disclaimer {
	margin-bottom: -20px;
}


.content {
	display: table-cell;
	width: 100%;
	height: 100vh;
	margin: 0 auto;
	padding: 8vh 6vw;
	text-align: left;
	vertical-align: top;
	word-break: break-word;
}

.content-home {
	height: 0px;
}

.content-pc-support {
	height: 0px;
}

.content-downloads {
	height: 0px;
}

.content-impressum {
	height: 0px;
}


.hobbys-content-container {
	text-align: center;
	max-width: 500px;
}

.hobbys-content-container-img {
	text-align: center;
}

:root {
  --mainColor: #000;
}

.hobbys-aufklappmenu {
	font-size: 1.4rem !important;
	color: #666;
	background:
	linear-gradient(
	to bottom, var(--mainColor) 0%,
	var(--mainColor) 100%
	);
	background-position: 0 100%;
	background-repeat: repeat-x;
	background-size: 4px 0px;
	text-decoration: none;
	transition: background-size .2s;
}

.hobbys-aufklappmenu:hover {
	color: #B0BEC5;
	background-size: 4px 50px;
}

.hobbys-keine-bilder {
	font-size: 1.3rem !important;
}

.hobbys-img {
	margin-top: 10px;
	margin-bottom: 10px;
	box-shadow: 0 0 1px #666;
	border: solid 5px #000;	
	width: 100%;
	max-width: 600px;
}

.hobbys-img-overlay {
	margin-top: 10px;
	margin-bottom: 10px;
	box-shadow: 0 0 1px #666;
	border: solid 5px #000;	
	width: 100%;
	max-width: 500px;
}

.hobbys-motorrad-technik-table {
	margin-left: 20px;
	margin-right: 20px;
	width: 100%;
	max-width: 500px;
}

.hobbys-rc-technik-table {
	margin-left: 20px;
	margin-right: 20px;
	width: 100%;
	max-width: 500px;
}

.hobbys-kart-technik-table {
	margin-left: 20px;
	margin-right: 20px;
	width: 100%;
	max-width: 500px;
}

.hobbys-kart-alt {
	font-size: 1.5rem;
}



.galerie-uebersicht {
	padding-bottom: 38px;
}

.galerie-ueberschrift {
	margin-top: 0rem !important;
	margin-bottom: 0.8rem;
	white-space: nowrap;
    overflow: hidden;
    width: 100%;
    text-overflow: ellipsis;
}



.home-ueberschrift {
	margin-top: 0rem !important;
}

.home-fehler {
	font-size: 1.4rem;
}

.home-fehler a {
	text-decoration: none;
}

.home-fehler a:hover {
	text-decoration: underline;
}


.home-img {
	margin-bottom: 0px;
}


.hp-history-text {
	
}

.hp-history-text-2 {
	font-size: 1.5rem;
}

.hp-history-img {
	margin-top: 10px;
	margin-bottom: 10px;
	box-shadow: 0 0 1px #666;
	border: solid 5px #000;	
	width: 100%;
	max-width: 600px;
}


.news-date {
	font-weight: 700;
	padding-right: 20px;
	float: left;
}


.projekte-content-container {
	text-align: center;
}

.projekte-content-container-img {
	text-align: center;
}

.projekte-bild-vergroessern {
	font-size: 1.4rem;
}

.projekte-img {
	margin-top: 10px;
	margin-bottom: 10px;
	box-shadow: 0 0 1px #666;
	border: solid 5px #000;
	width: 100%;
	max-width: 500px;
}

.projekte-img-overlay {
	margin-bottom: 20px;
	box-shadow: 0 0 1px #666;
	border: solid 5px #000;	
	width: 100%;
	max-width: 600px;
}


.pc-support-img {
	float: left;
	margin-right: 15px;
}

.pc-support-icon-abstand {
	margin-bottom: -16px;
}


.downloads-ueberschrift {
	margin-top: 0rem !important;
}

.downloads-ul {
	margin: 0;
	padding: 0;
	border: none
}

.downloads-name {
	font-weight: 700;
	padding-right: 0px;
	float: left;
}

.downloads-date {
	font-weight: 700;
	text-align: right;
	padding-right: 0px;
	float: right;
	width: 20%;
}

.downloads-size {
	font-weight: 700;
	text-align: right;
	padding-right: 30px;
	float: right; 
}


.galerie-ueberschrift {
	margin-top: 0rem !important;
}

.galerie-zurueck {
	margin-top: 2.5rem !important;
	margin-bottom: 2.5rem !important;
}


.impressum-ueberschrift {
	margin-top: 0rem !important;
}


/*   WEITER-BUTTON */

.btn span.weiter  {
	text-decoration: none;
	cursor: pointer;
	margin: 0rem 0 0 0 ;
}

.btn span.weiter:hover {
	color: #FFF;
	text-decoration: none;
}

.btn .weiter:before {
	display: inline-block;
	font-family: 'Font Awesome 5 Free'; /* - 'Font Awesome 5 Free' for Regular and Solid symbols;
										 - 'Font Awesome 5 Brand' for Brands symbols. */
	font-weight: 900; /*  Weight of the font (mandatory)
						 - 400 for Regular and Brands symbols;
						 - 900 for Solid symbols. */
	content: "\f0da";
	font-style: normal;
	font-variant-caps: normal;
	font-variant-ligatures: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	text-decoration: none;
	color: #f44336;
	padding: .2rem 0;
	margin: 0rem .6rem 0rem 0rem;
	transition: transform .3s ease-out;
}

.btn .weiter:hover:before {
	transform:  translate(.5rem);
}


/* ############################################################ */
/* Bereich Fuss 												*/
/* ############################################################ */

.section-fuss {
	position: relative;
	width: 100%;
	margin: 0;
	background-image: url(../images/header.jpg);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	height: 80vh;
	background-size: cover;
}

.fuss {
	display: inline-block;
	background: #999999;/* IE9*/
	background: linear-gradient(to right, #999999, rgba(0,0,0,.7), #666666);
	text-align: center;
	vertical-align: middle;
	width: 100%;
	text-align: center;
	padding: 6vh 8vw ;
	box-shadow: 1px 1px 1px #2F2F2F, inset 0px 0px 10px  rgba(255,255,255,.4);
	border: 1px solid #0F0F0F;
}

.footer-abstand {
	margin-bottom: 0px;
}

.footer-abstand-home {
	margin-bottom: 0px;
}


/* -----menu  ----- */

#menu-fuss ul {
	text-align: center;
	padding: 0rem;
	margin: 0;
}

#menu-fuss li {
	list-style: none;
	display: inline;
	padding: 0rem 0rem;
	margin: 0;
	line-height: 2rem;
}

#menu-fuss li a {
	position: relative;
	display: inline-block;
	overflow: hidden;
	font-size: 1.4rem;
	letter-spacing: 0rem;
	padding-right: 0rem ;
	margin: -1px;
	padding: .5rem .7rem;
	text-decoration : none;
	color: white;
	background: grey;
	border: 1px solid #0F0F0F;
	box-shadow: inset 0px 1px 1px 0px rgba(255,255,255,.4);
	border-radius: 2px;
}

#menu-fuss li a .top-box-filter {
	display: inline-block;
	position: absolute;
	top: 0px;
	left: -200%;
	height: 200%;
	width: 10px;
	box-shadow: 0px 0px 20px 10px white;
	transform: rotate(-45deg);transform-origin:0% 0%;
	transition: all 1s ease-out;
}

#menu-fuss li a:hover {
	background: linear-gradient(to top, #131313 , #000 100%);
}

#menu-fuss li a:hover .top-box-filter {
	left: 150%;
	top: 0px;
}

.section-fuss:hover .top-box-filter {
	width: 10px;
	background: rgba(255,255,255,.8);
	animation: shine-effect 2s ease-out;
}



/* Fussname */

#fussname {
	display: block;
	overflow: hidden;
	background: #000;
	color: #EFEFEF;
	font-weight: normal;
	font-size: 1.5rem;
	padding: 1vh 3vw;
	text-align: center;
	position: absolute;
	bottom: 0rem;
	transform: rotate(-90deg);
	transform-origin: 0% 0%;
}

#fussname .top-box-filter {
	display: inline-block;
	position: absolute;
	left: -200%;
	height: 200%;
	width: 20px;
	background: rgba(255,255,255,.5);
	opacity: 0.8;
	box-shadow: 0px 0px  10px grey;
	transform: rotate(0deg);transform-origin:0% 0%;
	animation: shine-effect 6s 1s infinite;
}



/* ############################################################ */
/* M E D I A   Q U E R I E S - RESPONSIVE-BILDSCHIRMABFRAGEN 	*/
/* ############################################################ */

/* ==================================== ab 320 Pixel ================================== */


/* - - - - -  nur Info - - - - - */
/*  für die kleinste Smartphone-Auflösung von 320pixel benötigen wir KEINE Bildschirmabragen (Media Queries),
denn hierfür gilt ja automtisch der gesamte vorstehende Quelltext-Code -
weil wir das Template ja 'mobile-first' angelegt haben */



/* ==================================== ab 360 Pixel ================================== */

@media (min-width: 360px) {

/* keine Angabe */

}


/* ==================================== ab 400 Pixel ================================== */

@media (min-width: 400px) {

/* keine Angabe */

}


/* ==================================== ab 480 Pixel ================================== */

@media (min-width: 480px) {

.logo-1 {
	padding: 6vh 8vw;
}

.logo-2 {
	padding: 6vh 8vw;
	text-align: right;
}

#name b {
	text-align: left;
}

#name-home b {
	text-align: left;
}

#name-news b {
	text-align: left;
}

#name-hobbys b {
	text-align: left;
}

#name-galerie b {
	text-align: left;
}

#name-hp-history b {
	text-align: left;
}

#name-projekte b {
	text-align: left;
}

#name-pc-support b {
	text-align: left;
}

#name-downloads b {
	text-align: left;
}

#name-impressum b {
	text-align: left;
}

#name-datenschutz b {
	text-align: left;
}

#name-disclaimer b {
	text-align: left;
}


#name b:before {
	display: inline-block;
}

#name-home b:before {
	display: inline-block;
}

#name-news b:before {
	display: inline-block;
}

#name-hobbys b:before {
	display: inline-block;
}

#name-galerie b:before {
	display: inline-block;
}

#name-hp-history b:before {
	display: inline-block;
}

#name-projekte b:before {
	display: inline-block;
}

#name-pc-support b:before {
	display: inline-block;
}

#name-downloads b:before {
	display: inline-block;
}

#name-impressum b:before {
	display: inline-block;
}

#name-datenschutz b:before {
	display: inline-block;
}

#name-disclaimer b:before {
	display: inline-block;
}


.box-1_of_1 ,
.box-1_of_2 ,
.box-1_of_3 ,
.box-1_of_4 {
	width: 60%;
}

.liste-1 ul ,
.liste-1-special {
	margin: 0 2rem 0 4rem;
}



}


/* ==================================== ab 580 Pixel ================================== */
@media (min-width: 580px) {

.box-1_of_1 {width: 50%;}
.box-1_of_2 {width: 50%;}
.box-1_of_3 {width: 33.33%;}
.box-1_of_4 {width: 25%;}

#menu-fuss li {
	display:inline;
}

}


/* ==================================== ab 640 Pixel ================================== */
@media (min-width: 640px) {

/* keine Angabe */

}


/* ==================================== ab 760 Pixel ================================== */
@media (min-width: 760px) {

html {
	font-size: 70%;
}

.content {
	padding: 8vh 8vw;
}

}


/* ==================================== ab 960 Pixel ================================== */
@media (min-width: 960px) {

.content {
	/* text-align: justify */
}

.box-1_of_4 {
	width: 25%;
}

}


/* ===================================== ab 1100 Pixel ================================= */

@media (min-width: 1100px) {

html {
	font-size:75%;
}

.content {
	padding: 8vh 8vw;
}

.footer-abstand-home {
	margin-bottom: 4px;
}

}


/* ===================================== ab 1400 Pixel ================================= */

@media (min-width: 1400px) {

html {
	font-size:80%;
}

}



/* ==================================== bis 481 Pixel ================================== */

@media (max-width: 481px) {

#name b {
	margin-top: 16px;
}

#name-home b {
	margin-top: 16px;
}

#name-news b {
	margin-top: 16px;
}

#name-hobbys b {
	margin-top: 16px;
}

#name-galerie b {
	margin-top: 16px;
}

#name-hp-history b {
	margin-top: 16px;
}

#name-projekte b {
	margin-top: 16px;
}

#name-pc-support b {
	margin-top: 16px;
}

#name-downloads b {
	margin-top: 16px;
}

#name-impressum b {
	margin-top: 16px;
}

#name-datenschutz b {
	margin-top: 16px;
}

#name-disclaimer b {
	margin-top: 16px;
}


}


/* ==================================== bis 761 Pixel ================================== */

@media (max-width: 761px) {

ol {
	padding-left: 6vw;
}

.hobbys-content-container {
	text-align: left;
	margin-left: 2px;
}

.hobbys-content-container-img {
	text-align: left;
}

.hobbys-aufklappmenu {
	padding-left: 6px;
}

.hobbys-motorrad-technik-table {
	margin-left: 0px;
}

.hobbys-rc-technik-table {
	margin-left: 0px;
}



.pc-support-icon-abstand {
	margin-bottom: -8px;
}


.projekte-content-container {
	text-align: left;
	margin-left: 2px;
}

.projekte-content-container-img {
	text-align: left;
}


}


/* ==================================== bis 961 Pixel ================================== */

@media (max-width: 961px) {

.news-date {
	float: none;
}


.downloads-name {
	float: none;
}

.downloads-date {
	float: none;
	text-align: left;
	width: 100%;
}

.downloads-size {
	float: none;
	text-align: left;
}

ul li.item {
	border-top: 1px solid #f3f3f3;
}

}


/* = = = = = = = = = = = = = = = = = = = = = Code ENDE = = = = = = = = = = = = = = = = = = = = = */