/* *************************************************** */
/* Allgemeine Basis-Definitionen */
/* *************************************************** */
/*
*/
/* Allgemeines CSS Reset */
/* ... ohne img wg. vspace und hspace, ohne table, td und th wg. cellpadding u.a. */
html, body, div, span, p, pre, a, address, code, dfn, dl, dt, dd, ol, ul, li, form, label, legend, caption, tbody, tfoot, thead, tr, h1, h2, h3, h4, h5, h6 
	{
	margin:0;
	padding:0;
	border:0;
	vertical-align:baseline;
	}

a img,:link img,:visited
	{
	border:none
	}

img
	{
	border:0 none;
	height:auto;
	max-width:100%;
	vertical-align:middle;
	}

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

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


/* Diverse Basis-Definintionen */

.clearfix::after, .clearboth::after {
  content: "";
  display: table;
  clear: both;
}

.clear {
  clear: both;
}

body 
	{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-family:'Duru Sans', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
	margin-top: 10px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	padding-left: 1%;
	padding-right: 1%;
	font-weight: normal;
	text-decoration: none;
	font-size: 16px;
	line-height: 1.2em;
	color: #000000;
	text-align:left;
	background-image:url(images/hg4ab.png);
	background-image:url(images/hg6ab.png);
	background-image:url(images/hg7ab.png);
	background-repeat:repeat;
	background-attachment:fixed;
	} 
/*
	font-size: medium; 
	font-size: 1em;
*/

p {
  font-size: 1em;  
  padding-top: 0.3em;
  padding-bottom: 0.3em;
  line-height: 1.2em;
}

div	{ line-height: 1.2em; font-size: 1em; }

br	{ line-height:1em; font-size: 1em;}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6
	{
	line-height:1.2em;
	}

a, a:link
	{
	text-decoration: underline;
	color: #004AE3;
	} 

a:visited
	{
         /* Funktioniert im Firefox nicht korrekt!!! */
	} 

a:focus
	{
	text-decoration: underline;
	color: #6235FD;
	} 

a:hover
	{
	text-decoration: underline;
	color: #6235FD;
	} 

a:active, a.active
	{
	text-decoration: underline;
	color: #F0F;
	color: #6235FD;
	} 


h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6
	{
	font-family: Arial, Helvetica, Verdana, sans-serif; 
	font-family:'Alegreya Sans SC', sans-serif;

	font-weight: bold; 
	padding-top: 0.3em;
	padding-bottom: 0em;
	}

h1, h2, h3, h4, .h1, .h2, .h3, .h4
	{
	color: #222222;
	}

h1, .h1
	{ 
	font-size: 180%; 
	} 

h2, .h2
	{ 
	font-size: 160%; 
	}

h3, .h3
	{ 
	font-size: 140%; 
	}

h4, .h4
	{ 
	font-size: 120%; 
	}

h5, .h5
	{ 
	font-size: 110%; 
	}

h6, .h6
	{ 
	font-size: 85%; 
	padding-top: 0em; 
	padding-bottom: 0em; 
	}

.h0, .h1, .h2, .h3, .h4, .h5, .h6      /* für Headers ohne paddings */
	{ 
	padding-top: 0em; 
	padding-bottom: 0em; 
	} 

table 
  { 
    empty-cells: show;
    font-size: inherit; 
    } 
/*
    font-size: 16px; 
*/

th
	{
	font-weight: bold; 
	text-align: left;
	background-color: #3574bb; 
	padding: 2px 0px 2px 0px;
	}
 
td
	{
	vertical-align: top;
	text-align: left;
	font-size: inherit; 
	}


ul 
	{
	padding-top: 0em; 
	padding-bottom: 0.1em; 
	margin-left: 1.2em; 
	margin-right: 1em; 
	padding-left: 0px; 
	}

ul li 
	{
	list-style: square; 
	}

ul ul li 
	{
	list-style: disc; 
	}

ul ul ul li 
	{
	list-style: circle; 
	}

ol 
	{
	padding-top: 0em; 
	padding-bottom: 0.4em; 
	margin-left: 1.5em; 
	margin-right: 1em; 
	padding-left: 0px; 
	}

ol li 
	{
	list-style:decimal; 
	}

ol ol li 
	{
	list-style: upper-alpha; 
	}

ol ol ol li 
	{
	list-style: lower-alpha; 
	}

dl 
	{
	padding-top: 0em; 
	padding-bottom: 0em; 
	margin-left: 0em; 
	margin-right: 0em; 
	}

dt 
	{
	font-weight: bold;
	padding-top: 0.6em; 
	padding-bottom: 0em; 
	margin-left: 0em; 
	margin-right: 0em; 
	}

dd 
	{
	padding-top: 0em; 
	padding-bottom: 0em; 
	margin-left: 2.4em; 
	margin-right: 2em; 
	}


/* *************************************************** */
/* Allgemeine Layout-Strukturen */
/* *************************************************** */
/*
*/
/* Standard-Bereiche */
/* ================= */

#OuterTop
	{
	margin-top:10px;
	margin-bottom:10px;
	text-align:center;
	}
/*
	border: 1px solid #039;
	background-color:#cccccc;
*/

#OuterBottom
	{
	margin-top:10px;
	margin-bottom:10px;
	}
/*
	background-color:#cccccc;
*/

#Container
	{
	margin-top:10px;
	margin-bottom:10px;
	}
/*
	border: 1px solid #039;
*/

#Header
	{
	}
/*
	min-height:60px;
	border: 1px solid #039;
	margin-top:10px;
	margin-bottom:10px;
*/


#rHeaderX, #rHeaderY, #rHeaderZ
	{
	padding-top:5px;
	padding-bottom:5px;
	}


/* Standard-Klassen für Reihen */
/* =========================== */

.o100
	{
	width:100%;
	}

/* ... für Over-background-color */
.oc
	{
	}
/*
	background-color:#86AED7;
	background-color:#cccccc;
*/

.r100
	{
	width:100%;
	} 
/*
	box-shadow:0px 0px 20px 0px #999972;
	box-shadow:0px 10px 20px 5px #777;
*/

/* ... anstelle von .rx mehrere .r's zum kombinieren */
/* ... ähnliches evtl. auch für die Over-Zeilen (.oc, .oplr, etc.) */
/* ... für width */
.rw
	{
	max-width:958px;
	margin: 0 auto;
	}

/* ... für Reihen-background-color */
.rc
	{
	background-color: #eeeeee;
	}
/*
	background-color:#86AED7;
	background-color:#efefef;
	background-color:#cccccc;
*/

/* ... für Reihen-padding nur links */
.rpl
	{
	padding-left:1%;
	padding-right:0px;
	}

/* ... für Reihen-paddings links/rechts */
.rplr1
	{
	padding-left:1%;
	padding-right:1%;
	}
.rplr
	{
	padding-left:2%;
	padding-right:2%;
	}

/* ... für Reihen-paddings oben/unten */
.rpou
	{
	padding-top:5px;
	padding-bottom:5px;
	}

/* ... für Reihen-paddings nur oben */
.rpo
	{
	padding-top:5px;
	}

/* ... für Reihen-paddings nur unten */
.rpu
	{
	padding-bottom:10px;
	}

/* ... für Reihen-margins oben/unten */
.rmou
	{
	margin-top:10px;
	margin-bottom:10px;
	}

/* ... für Reihen-paddings nur oben */
.rmo
	{
	margin-top:10px;
	}

/* ... für Reihen-paddings nur unten */
.rmu
	{
	margin-bottom:10px;
	}

/* ... für Reihen-border links/rechts */
.rblr
	{
	border-left:#039 solid 1px;
	border-right:#039 solid 1px;
	border-left: 1px solid #888888;
	border-right: 1px solid #888888;
	}

/* ... für Reihen-border oben/unten */
.rbou
	{
	border-top:#039 solid 1px;
	border-bottom:#039 solid 1px;
	border-top: 1px solid #888888;
	border-bottom: 1px solid #888888;
	}

/* ... für Reihen-border links/rechts/oben/unten */
.rb
	{
	border:#039 solid 1px;
	border: 1px solid #888888;
	}

/* ... für Reihen-shadow */
.rs
	{
	box-shadow: 0px 10px 20px 5px #777;
	box-shadow: 0px 1px 5px 0px grey;
	}

/* ... für Reihen-Text zentriert */
.rz
	{
	text-align:center;
	}

/* ... für diverse/individuelle Definitionen der Bereiche */
.cTop, .cTopX, .cTopY, .cTopZ
	{
	}

#oTopInfo
	{
	margin-top:-3px;
	}

.cTopInfo
	{
	text-align:center;
	}


.TopLine
	{
	background-color: rgba(200, 200, 200, 0.2);
	border: 1px solid #888888;
	background: linear-gradient(rgba(244,247,252,0.2), rgba(19,84,144,0.4) );
	min-height:20px;
	text-align:center;
	}
/*
	border: 1px solid #039;
	margin-top:10px;
	margin-bottom:10px;
*/


/* spezielle Bereiche und Wrapper */
.wTop, .wHeader, .wCenter, .wCenterTop, .wCenterCenter, .wCenterBottom, .wFooter, .wBottom, .wDiverse 
{
	border-left: 1px solid #888888;
	border-right: 1px solid #888888;
	box-shadow: 0px 1px 5px 0px grey;
	box-shadow: 2px 2px 3px 0px grey;
	border: 1px solid #888888;
}
/*
	margin-top: 10px;
	margin-bottom: 10px;
	background-color: #719d5a;
	border-radius:14px;
	box-shadow: 2px 2px 8px 2px rgba(33,90,42,0.4);
*/

.wTopNav, .wFooterLine, .wBottomLine 
{
}
/*
	min-height:0px !important;
	background-color: #74734e;
	box-shadow: 2px 2px 8px 2px rgba(33,90,42,0.4);
	margin-top: 10px;
	margin-bottom: 10px;
*/

.BlockRahmen
	{
    box-shadow: 0px 0px 2px 0px grey;
    margin-top:3px;
    margin-bottom:3px;
    margin: 2px 10px 2px 10px;
    padding-top:3px;
    padding-bottom:3px;
    padding-left:5px;
    padding-right:3px;
	}

.BlockRahmen3
	{
    box-shadow: 0px 0px 2px 0px grey;
    margin-top:2px;
    margin-bottom:2px;
    margin-left:10px;
    margin-right:10px;
    padding-top:3px;
    padding-bottom:3px;
    padding-left:5px;
    padding-right:3px;
	}

.cSpacer, .cDivider
	{
	height:10px;
	}

.cSpacerSmall, .cDividerSmall
	{
	height:5px;
	}
/*
	box-shadow: 2px 2px 8px 2px rgba(33,90,42,0.4);
	background-color:#ff0000;
*/


/* Standard-Klassen für Kolonnen */
/* (.Koln- nicht mehr benützen) */
/* Prozentuale Kolonnen (Mindestbreiten machen hier keinen Sinn) */
/* ============================================================= */

/* ... für alle Kolonnen gilt: */
div[class*=Kolprz-]
	{
	float:left;
	padding-right:1%;
	padding-top:2px;
	padding-bottom:2px;
	padding-bottom:1px;
	} 

.Kolprz-100
	{
	width:100%;
	float:none;
	} 

.Kolprz-33, .Kolprz-33fix
	{
	width:33.3333%;
	font-size:90%;
	padding-right:1.2% !important;
	} 
/*
*/


/* Standard-Klassen für Container */

.KolContainer
	{
	padding-right:0%;
	}
/*
	margin-left:20px;
	padding-left:20px;
	padding-right:20px;
	width:100%;
	margin: 5px 15px 5px 0px;
	padding: 3px 13px 3px 13px;
	border: 1px dotted;
*/

.ContentBox
	{
	padding: 3px 5px 3px 5px;
	background-color: #E1E1E1;
	}
/*
	border: 2px solid;
	min-height:100px;
*/


/* *************************************************** */
/* Individuelle Detail-Definitionen */
/* *************************************************** */
/*
*/

#rTopLogoPreisw {
        background-color:#006699;
        padding:5px;
}

#TopLogoPreiswLarge {
   display:block;
   width:100%;
}

#TopLogoPreiswMedium {
   width:100%;
   margin: 0 auto;
   display:none;
}

#TopLogoPreiswSmall {
   width:100%;
   margin: 0 auto;
   display:none;
}


/* Info- und Verkaufsboxen */
/* *********************** */

.DispNone {
    display:none;
}

.VerkaufsBoxAll {
   border: #ffffff 2px solid;
   width: 285px; 
   width: 298px; 
   min-height:271px;
   float: left;
   margin: 10px 10px 10px 10px;
   box-shadow: 4px 4px 5px 0px #111;
   box-shadow: 6px 6px 8px 0px #111;
   font-family: Arial, Helvetica, sans-serif;
   font-size:16px;
   position: relative;
}
/*
*/

.VerkaufsTitelBox {
   border-bottom: #ffffff 1px solid;
   background-color: #FFC;
   color:#000;
   width: 100%;
   height:auto;
   margin: 0px;
   padding: 3px;
}

.VerkaufsTitel {
   text-align:center;
   font-size:120%;
   font-weight:bold;
}

.VerkaufsTitelBox h2 {
   text-align:center;
   font-size:120%;
   font-weight:bold;
   font-family: Arial, Helvetica, sans-serif;
   color:#000;
   padding:0px;
   margin:0px;
}

.VerkaufsPreis {
   font-weight:bold;
   font-size:15px;
}

.VerkaufsPreisVerkauft, .Reduz {
   font-weight:bold;
   text-decoration:line-through;
   font-size:15px;
}

.Verkauft {
   font-weight:bold;
   background-color:#F0F;
   font-style:italic;
   position: absolute;
   top: 30px;
   left: 5px;
   z-index: 100;
	}

.Reduz1, .Reduz2 {
   font-weight:bold;
   background-color:#006600;
   color: #ffffff;
   font-style:italic;
}

.Reduz2 {
   position: absolute;
   top:5px;
   left:5px;
   font-size:120%;
}

.Lieferstatus {
   font-size:90%;
   display:none;	/*immer, weil immer abh*/
}

.VerkaufsBildBox {
   background-color: #dddddd;
   margin: 0px;
   text-align:center;
}
/*
   width: 100%;
*/

.VerkaufsBild {
   height: 180px;
   height: 194px;
}
/*
   max-height: 180px;
*/

.VerkaufsTextBox {
   border: #ffffff 1px solid;
   font-size:90%;
   line-height: 1;
   background-color: #FFC;
   margin: 0px;
   padding: 3px;
}
/*
   width: 283px; 
*/

.VerkaufsFixText {
   height:1em; 
}
/*
   height:80px; 
   height:4.6em; 
*/


.VerkaufsVarText {
   padding-top: 5px;
}
/* ... nur für generelle Überprüfung
   display:block;
*/

.VerkaufsTextBox > h3 {
   padding-top: 5px;
   font-family: Arial, Helvetica, sans-serif;
   color:#000;
   margin:0px;
   font-size: 1em;
   font-weight:normal;
}


/* *********************** */

/* spezielle/individuelle Kolonnen */
.Kolprz-TopLogoLeft
	{
	float:left;
	width:50%;
        padding:10px;
	} 
/*
*/

.Kolprz-TopLogoRight
	{
	float:right !important;
	width:50%;
        padding:10px;
	} 
/* ... erst bei "small"
	background-color: #E1E1E1;
	color: ...
*/

.Kolprz-TopLogoRight h1, .Kolprz-TopLogoLeft h1
	{
	color:#ffffff;
	font-size:200%;
	} 

.Kolprz-CenterLeft
	{
	float:left;
	width:50%;
	} 
/*
*/

.Kolprz-CenterRight
	{
	float:right !important;
	width:50%;
	} 
/*
*/

/* spezielle Test-Styles */
/* --------------------- */
/*
*/
#Fenster1, #Fenster2, #Fenster3
{
  color: #ffffff;
  text-align: center;
  position:fixed;
  z-index:1500;
  width:auto;
  width:100%;
}

#Fenster1
{
  top:100px;
  background-color: #000066;
  background-color: rgb(0 30 150 / 80%);
}

#Fenster2
{
  bottom:50%;
  background-color: #006600;
  background-color: rgb(0 60 0 / 80%);
}

#Fenster3
{
  bottom:90px;
  background-color: #880000;
  background-color: rgb(120 0 0 / 80%);
}


/* Media-Queries */
/* ============= */

/* ... ab ... */
@media (max-width: 940px) 
{

	.Kolprz-CenterLeft, .Kolprz-CenterRight, .Kolprz-CenterLeft2, .Kolprz-CenterRight2
		{
		width:50%;
		} 
/*
*/
}

/* ... resp. schon ab 650 ...*/
@media (max-width: 650px) 
{
	.Kolprz-CenterLeft, .Kolprz-CenterRight, .Kolprz-CenterLeft2, .Kolprz-CenterRight2
	  {
		width:100%;
		height:auto;
		min-height:auto;
		float:none;
	  } 
}

/* *********************** */


.ContentBNav1
	{
	text-align:left;
	}

.ContentBNav2
	{
	text-align:center;
	}

.ContentBNav3
	{
	text-align:right;
	}
/*
	margin:5px;
*/


/* generelle NoDecoration */
.LinkNoDec a, .NoDec a:link
	{
	text-decoration:inherit !important;
	color: inherit !important;
	}

/* generelle NoDecoration (2)*/
.LinkNoDec2, .NoDec2
	{
	text-decoration:inherit !important;
	color: inherit !important;
	}

/* Schatten und Links WebMaster */
.shadowWM {
    -webkit-box-shadow: 4px 4px 5px 0px #111;
    -moz-box-shadow: 4px 4px 5px 0px #111;
    -o-box-shadow: 4px 4px 5px 0px #111;
    -ms-box-shadow: 4px 4px 5px 0px #111;
    box-shadow: 4px 4px 5px 0px #111;
}

.LinkWM a
	{
	color: #ffffff;
	text-decoration:none;
	text-shadow: 1px 1px 0px #000000;
	}

.LinkWM a:focus
	{
	color: #FF0;
	}

.LinkWM a:hover
	{
	color: #ffff99;
	text-shadow: 1px 1px 0px #000000;
	}
/*
	font-weight:bold;
*/

.LinkWM a:active, a.active
	{
	color: #ffff99;
	text-shadow: 1px 1px 0px #000000;
	}
/*
	font-weight:bold;
*/

/* Schatten und Links MobileIcon */
.LinkMobIcon a
	{
	color: #ffffff;
	text-decoration:none;
	text-shadow: 1px 1px 0px #000000;
	}

.LinkMobIcon a:focus
	{
	color: #FF0;
	}

.LinkMobIcon a:hover
	{
	color: #ffff99;
	text-shadow: 1px 1px 0px #000000;
	}
/*
	font-weight:bold;
*/

.LinkMobIcon a:active, a.active
	{
	color: #ffff99;
	text-shadow: 1px 1px 0px #000000;
	}
/*
	font-weight:bold;
*/


/* *************************************************** */
/* Allgemeine und individuelle Media-Queries */
/* *************************************************** */
/*
*/
/* 
Hier befinden sich alle Komponenten, die von Media-Queries betroffen sind
=> ... aber ohne deren Ausgangsbasis (Desktop first)
=>    (diese befinden sich im Bereich Layout oder Details)
=> und alle "Standard-Queries" (auch wenn ohne Komponenten)
*/

/* Individuelle MQs */
/* ================ */


/* ab iPhone 3/4/5 quer */
@media (max-width: 480px) {

	#TopLogoPreiswLarge {
	   display:none;
	}

	#TopLogoPreiswMedium {
	   display:block;
	}
}

/* ab iPhone 6 hoch */
@media (max-width: 375px) {

	#TopLogoPreiswLarge {
	   display:none;
	}

	#TopLogoPreiswMedium {
	   display:block;
	}

}

@media (max-width: 320px) {
/* 

	#TopLogoPreiswMedium {
	   display:none;
	}

	#TopLogoPreiswSmall {
	   width:300px;
	   width:100%;
	   display:block;
	}
*/

	#TopLogoPreiswLarge {
	   display:none;
	}

	#TopLogoPreiswMedium {
	   display:block;
	}
}

@media (max-width: 319px) {

}


/* Standardprozeduren für Kolonnenunbrüche */
/* ======================================= */
/* ... bei iPhone6 hoch (375px) gerade noch 3 lassen? */
/* ... erst ab kleiner? (374px) von x*3 zu x*2 und 1*3 zu 3x1 */
/* ... NEIN, bereits ab iPhone6 hoch!!! */
/* ... NEIN, bereits ab iPhone5 quer !!! */
@media (max-width: 568px) 
{
	.Kolprz-33, .Kolprz-11	/* für 3 -> 3*1) */
	  {
		width:100%;
		height:auto;
		min-height:0;
		float:none !important;
		padding-top:0px;
		padding-bottom:0px;
		padding-right: 0% !important;
	  } 

	.ContentBNav1, .ContentBNav2, .ContentBNav3
	  {
		text-align:center;
		min-height: 18px;
		padding-top:2px;
		padding-bottom:1px;
		background-color: rgba(200, 200, 200, 0.8);
		background-image: url(./images/NavBlueBottomLight.png) !important;
	  }

	#rBottomNav3
	  {
		padding-left: 0%;
	  }

} 
/*
		font-size:initial;
*/


/* ... ab kleiner (320px) gibt es nur noch 100% */
@media (max-width: 319px) 
{
	.Kolprz-50, .Kolprz-33, .Kolprz-25, .Kolprz-20, .Kolprz-16, .Kolprz-12, .Kolprz-11	
	  {
		width:100%;
		height:auto;
		min-height:0;
	  } 
} 
/*
		font-size:initial;
*/


/* *************************************************** */
/* Individuelle Navigation */
/* *************************************************** */
/*
*/
/* Bottom-Navigation */
/* ***************** */
#rBottomNav3
{
	background-color: rgba(200, 200, 200, 0.8);
	background-image: url(./images/NavBlueBottomLight.png);
}

/* ... ist so Ok */
#MobileIcon0 { 
	display:block; 
     /* Hintergrund MobileIcon + Text */
	height: 55px;
	width:180px;
}
/* ... wenn mit Text
	background-color: #369;
	background-color: rgba(51, 102, 152, 0.6);
*/

.NavSplit {
    display:none;
}

/* betrifft die Mobile-Navigationstexte im Desktopmodus */
#rTopNavContent0 {
	display:none; 
	width:auto;
}
/*
*/

/* Top-Navigation */
/* ************** */
#rTopNav0
	{
	}
/*
	background-color: transparent;
	text-align:center;
*/
/* Top-Navigation 0 - Mobile first */
/* gesamter Nav-Block bei Mobile */
.TopNav0 ul {
	list-style: none;	/* ... nicht nur bei ul li ?! */
	min-height:40px;	/* ... der Desktopleiste */
	text-align: center;	/* ... der Desktopleiste */
	padding: 0;	/* ... zwischen HM, UM und links rechts (auch bei Desktop) */
	margin: 0;	/* ... zwischen HM, UM und links rechts (auch bei Desktop) */
	width:200px;	/* Gesamtbreite des Nav-Blockes */
}
/* Navigationsleiste zentriert oder links
	text-align: center;
	text-align: left;
	background-color: #86AED7;
	background-color: #369;
	background-color: rgba(51, 102, 152, 0.2);
	background-color: rgba(51, 102, 152, 0.2);
	background-color: rgba(51, 102, 152, 0.6);
	background-color: rgba(51, 102, 152, 0.3);
*/

.TopNav0 li {
  list-style: none;
  font-family: Arial, Helvetica, Verdana, sans-serif;
  font-size:110%;
  line-height: 40px;
}
/* ... hier für was ?
  margin-top:2px;
  margin-top:3px;
  text-align: left;
  text-align: center;
*/

.TopNav0 a {
  text-decoration: none;
  color: #ffffff;
  font-weight:bold;
  text-shadow: 1px 1px 0px #000000;
  background-color: rgba(51, 102, 152, 0.6);
  background-color: rgba(86, 141, 195, 0.8);
  background-color: rgba(84, 130, 175, 0.8);
/* Menütext im MobileMenü links */
  text-align:left;
  text-shadow: 1px 1px 0px #000000;
  display: block;
  padding-left: 15px;
  border-bottom: 1px solid #888;
/* Hintergrund aller Menüpunkte */
}
/*
  background-color: rgba(51, 102, 152, 0.9);
  transition: 1s background-color;
  transition: .3s background-color;
*/

.TopNav0 a:hover, .TopNav0 a:focus {
	background-color: rgba(51, 102, 152, 0.8);
	color: #ffffff;
	font-weight:bold;
	text-shadow: 1px 1px 0px #000000;
}
/*
*/

.TopNav0 a.active {
	background-color: rgba(51, 102, 152, 0.9);
	color: #ffffff;
	font-weight:bold;
	text-shadow: 1px 1px 0px #000000;
	cursor: default;
}
/*
*/

/* Sub Menus */
.TopNav0 li li {
	margin-left:20px;
	font-family: Arial, Helvetica, Verdana, sans-serif; 
	font-size:90%;
	text-align: left;
	line-height: 25px;

}
/*
	background-color: rgba(51, 102, 152, 0.2);
	font-size: .8em;
*/


/* ***************************************************** */

/* MediaQueries für Top- und Bottom-Navigation */

/* TopNav und BottomNav3 static oder sticky je nach Medium (wegen Platz nach unten) */
@media only screen and (min-width: 320px) and (orientation: portrait)
{
	#oTopNav0, #oBottomNav3
	{
	position:static;
	}
}

@media only screen and (min-width: 360px) and (orientation: portrait)
{
	#oTopNav0
	{
	position: -webkit-sticky;
	position:sticky;
	top:0;
	z-index:100;
	}

	#oBottomNav3
	{
	position: -webkit-sticky;
	position:sticky;
	bottom:5px;
	z-index:100;
	}
}

@media only screen (min-width: 480px) and (orientation: landscape)
{
	#oTopNav0,  #oBottomNav3
	{
	position:static;
	}
}


/* normales Menü bei (Style menu for larger screens):
   - bis iPhone 6 quer (667px und mehr), danach MobileNav 
*/

@media only screen and (min-width: 700px)  /* ex 667 */
{
	#oTopNav0 
	{
	position: -webkit-sticky;
	position:sticky;
	top:0;
	z-index:100;
	}

	#oBottomNav3
	{
	position: -webkit-sticky;
	position:sticky;
	bottom:5px;
	z-index:100;
	}

	#rTopNav0
	{
	background-color: rgba(200, 200, 200, 0.2);
	border: 1px solid #888888;
	background: linear-gradient(rgba(244,247,252,0.2), rgba(19,84,144,0.4) );
	}
/*
	background-image:url(../../images/NavBlueBottomLight.png);
	background-repeat:repeat-x;
	background-position:left bottom;
*/


  .TopNav0 ul {
	width: auto;
     /* Normal-Menü: Leiste links oder zentriert */
	text-align: center;
/* ... Variante
	text-align: left;
	margin-top:2px;
	background-color: transparent;
	background-color: #86AED7;
	min-height:35px;
*/
  }
	
  .TopNav0 li {
    width: auto;	/* Desktop-Nav-Texte */
    line-height: 30px;
    font-size:100%;
    border-bottom: none;
    display: inline-block;
    margin-top:4px;
  }
/*
    height: 30px;
*/

  .TopNav0 a {
    border: 2px solid black;
    border: 1px solid #111;
    border-left-color: #ADC4D5; border-top-color: #ADC4D5;
    text-shadow: 1px 1px 0px #000000;
 /* Menütext auf Hauptleiste zentriert */
    text-align:center;
    text-align:left;
    padding: 0 5px;	/* ... dafür paddings links rechts*/
  }
/*
    border-bottom: none;
    color:#FFFFFF;
    background-color:#064D81;
*/

.TopNav0 a:hover, .TopNav0 a:focus {
    border-color: #ADC4D5;
    border-left-color: black; border-top-color: black;
}

  .TopNav0 > ul > li {
	text-align:left;
	text-align: center;
	margin: 4px 4px 0 4px;
  }
/* Text im Menü zentriert oder linksbündig
	margin-left:5px;
	margin: 0px 5px 0 5px;
	text-align: center;
	text-align:left;
*/

  .TopNav0 > ul > li > a {
  }
/* ... wenn Text im NormalMenü linksbündig ist
    padding-left: 7px;
*/

  /* Sub Menus */
  .TopNav0 li ul {
    position: absolute;
    display: none;
    text-align:left;
    margin-top:0px;
  }
/*
    width: inherit;
    background-color: #369;
    background-color: rgba(51, 102, 152, 0.2);
    background-color: rgba(51, 102, 152, 0.6);
*/

   .TopNav0 > ul > li > ul > li > a {
    width: 130px;
    width: auto;
    background-color: rgba(51, 102, 152, 0.6);
 /* Sub Menus im NormalMenü */
    text-align:left;
    padding-left:5px;
    padding-right:5px;
  }
/* Text-Einrückung Sub Menus 
    padding-left: 20px;
    padding-left: 5px;
*/

  .TopNav0 li:hover ul {
    display: block;
  }
/*
*/

  .TopNav0 li ul li {
 /* Einrückung Untermenü im NormalMenü */
    margin: 2px 0px 2px 10px;
    display: block;
  }
/*
    margin-left:5px;
    margin-top:2px;
    margin-bottom:5px;
*/

	#MobileIcon0 {
		display:none;
	}

	.NavSplit {
	    display:block;
	}

	#rTopNavContent0 {
		display:block !important;
	}
}