/* = = = = = = = = = = = = = = = = = 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: #253336;
	color: #B0BEC5;
	font-size: 1.7rem;
	margin: 0 auto;
	/* background-image: url(../images/logo04.jpg);
	background-position: 50% 0%;
	background-repeat: no-repeat;
	background-attachment: fixed; */
}
/* unterseiten-hintergrundbilder */
body.logobild-01 {
	background-position: 50% 100%;
	background-image: url(../images/logo07.jpg);
}
body.logobild-02 {
	background-position: 50% 0%;
	background-image: url(../images/logo03.jpg);
}
body.logobild-03 {
	background-position: 50% 100%;
	background-image: url(../images/logo02.jpg);
}
body.logobild-04 {
	background-position: 50% 100%;
	background-image: url(../images/logo01.jpg);
}
body.logobild-05 {
	background-position: 50% 0%;
	background-image: url(../images/logo05.jpg);
}
body.logobild-06 {
	background-position: 50% 100%;
	background-image: url(../images/logo08.jpg);
}
/* 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%;
}
/* 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 bildesbwz. 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 steelblue;
	width: 100%;
	height: auto;
	border: solid 0.3rem #FFF;
  // border: solid 1.2rem #1B2225;
}
/* ############################################################ */
/* logo bereich */
/* ############################################################ */
.section-logo {
	display: block;
	width: 100%;
  margin: 0;
	padding: 0;
}
.logo-1 {
	display: inline-block;
	width: 100%;
  margin: 0;
	text-align: left;
	padding: 4vh 6vw;   // vh % der sichtbaren Höhe, vw Breite
  // padding: 4vh 6vw;   // vh % der sichtbaren Höhe, vw Breite
}
.logo-2 {
	display: block;
	overflow-x: hidden;
	width: 100%;
	// background: red;
  background: #FFA500;
/* IE9 */
	// background: linear-gradient(to right ,red , rgba(0,0,0,.3) , red );
	// background: linear-gradient(to right ,#DF8500 , rgba(0,0,0,.3) , #DF8500 );
	background: linear-gradient(to right, #DF8500, rgba(255, 128, 0, .3), #DF8500 );
	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;
}

/* name */
#name {
	display: block;
	background: transparent;
	color: #fff;
	text-shadow: 0 0px 1px #000;
	font-weight: bold;
	// font-size: 2.2rem;
	font-size: 3.54rem;
	// line-height: 2.3rem;
	line-height: 0.3rem;
	padding: 0rem;
}
#name span {
	font-size: 1.7rem;
	font-style: normal;
	color: #fff;
}
/* seitentitel - z.b.  -home- */
#name b {
	text-align: center;
	display: block;
	font-size: 1.4rem;
	text-transform: uppercase;
	letter-spacing: 1px;
}
/* icon vor dem seitentitel*/
#name b:before {
	display: none;
	font-size: 2.4rem;
	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: "\f11c";
	font-style: normal;
	font-variant-caps: normal;
	font-variant-ligatures: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	text-decoration: none;
	color: #FFFFFF;
	text-shadow: 0 0 1px #000000;
	padding: 0rem;
	margin: 4px;
	width: 4rem;
	height: 3rem;
	line-height: 3rem;
	background: black;
	border-radius: 4px;
	text-align: center;
}
/* ############################################################ */
/* bereich content */
/* ############################################################ */
.section-content {
	display: table;
	width: 100%;
	margin: 0;
	padding: 0;
	background: #2E3E46;
/* IE9*/
background: radial-gradient(circle at 0% 0%,rgba(0,0,0,.6) 400px,
#2D3D44  1000px,
	#2D3D44 1200px);
}
.content {
	display: table-cell;
	width: 100%;
	height: 100vh;
	margin: 0 auto;
	padding: 12vh 6vw;
	text-align: left;
	vertical-align: top;
}
/* ############################################################ */
/* bereich fuss */
/* ############################################################ */
.section-fuss {
	POSITION: relative;
	width: 100%;
	margin: 0;
	/*background-image: url(../images/logo04.jpg);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	height: 100vh;
	background-size: cover; */
}
/* unterseiten-hintergrundbilder */
.section-fuss.logobild-01 {
	background-image: url(../images/logo02.jpg);
}
.section-fuss.logobild-02 {
	background-image: url(../images/logo01.jpg);
}
.section-fuss.logobild-03 {
	background-image: url(../images/logo07.jpg);
}
.section-fuss.logobild-04 {
	background-image: url(../images/logo08.jpg);
}
.section-fuss.logobild-05 {
	background-image: url(../images/logo05.jpg);
}
.section-fuss.logobild-06 {
	background-image: url(../images/logo06.jpg);
}
.fuss {
	display: inline-block;
	// background: red;
  background: #DF8500;
/* IE9*/
	// background: linear-gradient(to right,  red,rgba(0,0,0,.7), red);
	// background: linear-gradient(to right ,#DF8500 , rgba(0,0,0,.3) , #DF8500 );
  background: linear-gradient(to right, #DF8500, rgba(255, 128, 0, .3), #DF8500 );
	text-align: center;
	vertical-align: middle;
	width: 100%;
	text-align: center;
	padding: 6vh 6vw;
	box-shadow: 1px 1px 1px #2F2F2F, inset 0px 0px 10px  rgba(255,255,255,.4);
	border: 1px solid #0F0F0F;
}
/* -----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: #2D3D44;
	border: 1px solid #0F0F0F;
	box-shadow: inset 0px 1px 1px 0px rgba(255,255,255,.4);
	border-radius: 4px;
}

#menu-fuss li a:hover {
background: linear-gradient(to top, #1E272D,	#587487 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 2vw;
	text-align: center;
	position: ABSOLUTE;
	bottom: 0rem;
	transform: rotate(-90deg);
	transform-origin: 0% 0%;
}

/* ############################################################ */
/* 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 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: 7vh 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: 11vh 10vw;
}
}
/* ===================================== ab 1400 pixel ================================= */
@media (min-width: 1400px) {
html {
	font-size: 80%;
}
}
/* +  +  +  +  + +  +  +  +  +  C O D E ENDE  +  +  +  +  +  +  +  +  +  + */