/* ----- IMPORTS ------ */

@import url('reset.css');
@import url('farben_masse.css');



/* ----- TAG-ELEMENTE ------ */

body {
	font-size: 16px;
	line-height: 1.5;
	color: #000;
	/*color:rgb(0, 61, 110);*/
	font-family: 'Ubuntu', Arial, Helvetica, sans-serif;
	font-weight: 300;
	/*-webkit-font-smoothing:antialiased;  Safari: Schrift wird dünner */
	/*text-rendering: optimizeLegibility !important; z.B. für Ligaturen Fonts < 20px */
	width:100%;
	height:100%;
	
	/*background-color:#0c160d;
	background-image:url(../images/bg.jpg); 
	background-size: cover;*/
}
p { margin:0 0 6px 0; padding:0; } /* default ist margin: 1em 0px */

hr { color:#000; background-color:#000; height:1px; margin-bottom:10px; margin-top:10px; border:0; width:100%; text-align:left; }

a { /*color:rgb(0, 61, 110);*/ color:black; text-decoration:none; outline: none; }
a:hover { color:#e42c2a; text-decoration:none; }

strong { font-weight: 500; }

h1 {
	padding-top:0px;
	margin-bottom:7px;
	font-size:19px;
	line-height:1.21;
	font-weight: 300;
	letter-spacing:0px;
}
h2 {
	padding-top:0px;
	margin-bottom:11px;
	font-size:22px;
	line-height:1.4;
	font-weight: 300;
	letter-spacing:0px;
}
h6 { /* Format «Farbe»: Texteditor in config.js, de.js und contents.css  */
	padding:0;
	margin:0 0 7px 0;
	font-size: 16px;
	line-height: 1.5;
	font-weight:300;
	color: #e42c2a;
}


header {
	margin:auto;
	min-height:189px;
	position:relative;
	z-index:2;
	margin-top:-19px;
}



/* ANFANG Suchenfeld-Styles Header.s Nicht-Header-Styles stammen aus tmplt_produkte.css Z. 56. */

/* ovrt von tmplt_produkte.css */
#tags { 
	background-color:rgba(255,255,255,0.7); 
	border:none; 

	color:#000; 
	font-size:16px;

	width:198px; 
	height:16px; 
	vertical-align:top; 

	padding:5px; 
	margin:0px 0 0 0px; 

	border-radius: 5px;
}

#sucheBtnHeader { height:23px; width:23px; margin:2px 5px 0 7px; }
/* ENDE Suchenfeld-Styles Header */



/* ----- ID-ELEMENTE MIT ZUGEHÖROGEN KLASSEN ------ */

#container {
	margin: auto;
	position:relative;
	z-index:1;
	/*background-color: pink;*/
}
/*#container > * {
	text-align:left;
}
*/

/* BG */
#bgStatisch {
	background-color:#0c160d;
	
	/* auf mobile und evtl. auch tablet auskommentieren: */
	background-image: url(../images/bg.jpg);
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	height: 100%; /*fallback Android 4*/
	width: 110%; /*fallback Android 4*/
	height: 100vh;
	width: 110vw;
	background-position: center 0;
	overflow: hidden;
	position: fixed;
	top:0px;
	z-index:0;
}
#bg {
	background-image: url(../images/bg.jpg);
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	height: 100%; /*benötigt für Android 4*/
	width: 100%; /*benötigt Android 4*/
	height: 100vh;
	width: 100vw;
	background-position: center 0;
	overflow: hidden;
	position: fixed;
	top:0px;
	z-index:0;
}
@keyframes kenburns {
	0% {
	  opacity: 0;
	}
	5% {
	  opacity: 1;
	}
	95% {
		transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
		animation-timing-function: ease-in;
		opacity: 1;
	}
	100% {
		transform: scale3d(2, 2, 2) translate3d(0px, -0px, 0px);
		opacity: 0;
	}
}
#bg { animation: kenburns 85s infinite; }
/*ohne Loop:*/
/*@keyframes kenburns {
	0% {
	  opacity: 0;
	}
	5% {
	  opacity: 1;
	}
	100% {
		transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
		animation-timing-function: ease-in;
		opacity: 1;
	}
}
#bg {
  animation: kenburns 15s normal;
  animation-fill-mode: forwards;  
}*/

#logo { margin-top: 40px; }

#cartMeta {
	width:29px;
	height:22px;
	margin-top: 3px;	
}

#chartBild { min-width:230px; max-width:450px; }

.chartSection { background-color:rgba(255,255,255,0.8); }

.paddingBox {
	max-height:5000em; /* Android Patch */
}

.paddingBox ul { 
	margin:0;
	padding:10px 0 0 20px;
    /*list-style: none outside none;*/
	list-style-type:disc;
	overflow: auto;
}
.paddingBox ul li {
	line-height:1.5;
	/*padding:0px 0px 3px 15px;*/
	/*background: url(../images/li-zeichen.png) 0 1px no-repeat;*/
}
.paddingBox ol { 
	margin:0;
	padding:10px 0 0 20px;
	overflow: auto;
}
.paddingBox ol li {
	line-height:14px;
	padding-bottom:3px;
	padding-left:0px;
}


section {
	margin: 2px auto 0 auto;
	background-color:rgba(255,255,255,0.8);
	text-align:left;
	padding:0;
	color:black;
}

.paddingNewsBox { 
	padding:12px 6px 11px 13px;
	text-align:left;
}
.paddingBox { 
	padding:22px 16px 11px 20px;
	text-align:left;
}



footer {
	font-size: 14px;
	text-align:left;
	/*color:black;*/
	
	margin: 18px auto 18px auto;
	padding:18px 31px 18px 31px;
	
	background-color:rgba(255,255,255,0.9);
}
footer a {
	/*color:white;*/
}




/* ----- FORM-VALIDIERUNG ----- */

.rahmenRotForm { border: 1px solid #ff0000; }
.txtRotForm { color:#ff0000; display:block; }



/* ----- ALLGEMEINE KLASSEN ----- */

/* Layout generisch */
.visible { visibility:visible; }
.hidden { visibility:hidden; }

.inline { display:inline-block; }
.none { display:none; }

.left { float:left; }
.right { float:right; }
.clear, .clearfix:after { clear: both; }

.bb { /* padding «nach innen» */
	-webkit-box-sizing: border-box;
   	-moz-box-sizing: border-box;
    box-sizing: border-box;
}

.uppercase { text-transform: uppercase; }

.taLeft { text-align:left; }

.noOverflow { overflow:hidden; }

.bild100prztDiv { max-width:100%; }

.vaTop {vertical-align: top; }

.fussbuendig { display: table-cell; vertical-align: bottom; }/* ACHTUNG: funzt nur ohne float */
.vEingemittet { display: table-cell; vertical-align: middle; }/* ACHTUNG: funzt nur ohne float */
.containerEinmitten { /* ACHTUNG: body muss height und width mit 100% haben */
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -447px;
	margin-top: -273px; 
}

/* Text-Pfeil. TO DO: mit css-before oder -after lösen */
.linkTextPfeilKlein { font-size:1.6em; line-height:1px; vertical-align:-2px; font-family:'Lato', sans-serif; }
.linkTextPfeil { font-size:34px; line-height:1px; vertical-align:-3px; font-family:'Lato', sans-serif; }
.linkTextPfeilGross { font-size:49px; line-height:1px; vertical-align:-6px; font-family:'Lato', sans-serif; }
/* Font awesome Icons*/
/*
.icon::before {
	display: inline-block;
	margin-right: .5em;
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transform: translate(0, 0);
}

konventionell mit Grafik:
.punkteLink a:after {
    display: inline-block;
    content: url('../images/pfeil.png');
    width: 49px;
    height: 49px;
}
*/


/* ANFANG Sprite-Button */
/*.btnSprite {
	padding:2px 0;
	height:19px;
	width:132px;
	text-align:center;
	background-image:url(../images/btnSprite.png);
	background-size:28px 42px;
}
.btnSprite:hover {
	background-position: 0 -19px;
}
.btnSprite a {
	line-height:18px;
	color:#fff;
	font-size:12px;
	font-weight:bold;
	display:block;
}
.btnSprite a:hover {
	color:#00ffff;
}*/
/* ENDE Sprite-Button */

/* ANFANG Div-Tabelle */
/*.divTblReihe {
	width: 670px; 
	padding:0; 
	margin: 0;
	overflow: hidden; 
}
a:hover .divTblReihe p { color:#ff0000; }
.tabellenZelle {
	float: left; 
	padding:3px 0;
	margin: 0;
	color:#333;
}

.breiteZelle1 { width: 105px; }
.breiteZelle2 { width: 75px; }
.breiteZelle3 { width: 160px; }
.breiteZelle4 { width: 330px; }

.divTblTrennlinie { height:2px; margin:11px 0; }*/
/* ENDE Div-Tabelle */


/* ANFANG PDF-Link */
/*.pdfLinkMitLi ul { 
	margin-left:0;
	padding-left:0;
	list-style:none;
}
.pdfLinkMitLi li {
	color:#fff;
	line-height:21px;
	padding:0 0 0 17px;
	margin:0;
	background: url(../images/pdfIcon.png) 0 3px no-repeat;
}
.pdfLinkMitLi li a { color:#f00; }
.pdfLinkMitLi li:hover { background: url(../images/pdfIconOver.png) 0 3px no-repeat; }

.pdfLinkMitLi li a:hover { color:#fff; }*/
/* ENDE PDF-Link */


.eckenRunden {
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-khtml-border-radius:6px;
	border-radius: 6px;
}
.eckenRundenOben {
	-webkit-border-top-left-radius: 6px;
	-webkit-border-top-right-radius: 6px;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
}
.eckenRundenUnten {
	-webkit-border-bottom-left-radius: 6px;
	-webkit-border-bottom-right-radius: 6px;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
}




/* BACK TO TOP BUTTON
================================================== */
#back-top {
	position: fixed;
	left: -1px;
	bottom: 23px;
	margin:auto;
	z-index: 9;
	display: none;
}
#back-top span { 
	font-family:'Lato', sans-serif; 
	font-size:69px; 
	line-height:1;
	color: black;
	display: block;
	transform: rotate(-90deg);
	background-color:rgba(255,255,255,0.8);
	padding: 0 7px 0px 7px;
}
#back-top span:hover {
	color: red;
}


/*
#back-top a {
	text-decoration: none;
	width: 36px;
	height: 42px;
	display: block;
	background-image: url(../images/goTop.png);
	background-repeat: no-repeat;
	background-position: center center;
}
#back-top a:hover {
	background-image: url(../images/goTopOver.png);
	background-repeat: no-repeat;
	background-position: center center;
}
@media (-Webkit-min-device-pixel-ratio: 1.5),
 (-moz-min-device-pixel-ratio: 1.5),
 (-o-min-device-pixel-ratio: 3/2),
 (min-device-pixel-ratio: 1.5),
 (min-resolution: 1.5dppx) {
	 
	 #back-top {
		bottom: 10px;
		left: 18px;
	}
	#back-top a {
		width: 54px;
		height: 83px;
		background-image: url(../images/goTop@2x.png);
	}
	#back-top a:hover { background-image: url(../images/goTopOver@2x.png); }
}
*/

/* Schatten und Glühen */
.textSchatten { text-shadow: 0px 3px 10px rgba(0, 0, 0, 0.5); }
.textSchattenHart { text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3); }
.txtGluehen { text-shadow: 0 0 0.2em #fff; }
.boxSchatten { box-shadow: 0px 0px 10px 0 rgba(45,95,160,.9); } /* alternativ: 10px 10px 32px 0 rgba(0,0,0,.9) */


/* ANFANG Browser-Patches */
/*.ie8imgPatch { max-width: none; }
.androidUmbruchPatch { background-image: url(../images/shim.gif); }*/
/* ENDE Browser-Patches */



/* 	ALLGEMEINE MEDIA QUERIES
====================================================================== */
/*@media (-Webkit-min-device-pixel-ratio: 1.5),
 (-moz-min-device-pixel-ratio: 1.5),
 (-o-min-device-pixel-ratio: 3/2),
 (min-device-pixel-ratio: 1.5),
 (min-resolution: 1.5dppx) {
	#back-top a {
		background-image: url(../images/goTopOff_2x.png);
	}
	#back-top a:hover {
		background-image: url(../images/goTop_2x.png);
	}
 }
 
@media only screen and (min-width: 768px) and (max-width: 959px) {}
@media only screen and (max-width: 980px) {}

@media screen and (orientation: landscape) {}
*/