/* CSS Responsive Webdesign:*/
/* Importieren externer Stylesheets für mehr Übersicht*/
@import url('animations.css');

/*---------------------------------------------------------------*/
/*Basis-Angaben Layout bis 30em (480px)*/
/*---------------------------------------------------------------*/
html body {
  margin: 0;
  padding: 0;}
body { 
  font-family: Myriad, Helvetica, Arial, Trebuchet, Verdana, sans-serif;
  font-size: 100.01%;
  color: rgb(80,80,80); /*dunkelgrau*/
  background-color: rgb(240,240,240);}
/*alle Elemente werden nach width als Gesamtbreite gerechnet, kein padding und border dazugerechnet*/
* {  
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;}
/* Bilder behalten inhärente Größe und werden gleichzeitig nie größer als der sie umgebende Bereich */ 
img {
  max-width: 100%;}
a img {
  text-decoration: none;
  border-style: none;}
a {
  text-decoration: none;
  margin: 0;
  padding: 0;
  color: rgb(80,80,80);}
a:hover, a:target, a:focus {
  text-decoration: none;
  margin: 0;
  padding: 0;
  color: rgb(84,131,195);}
address {
  font-style: normal;
  text-decoration: none;
  margin: 0;
  padding: 0;}
ul {
  text-decoration: none;
  margin: 0;
  padding: 0;}
.liste ul li {
  width: 90%;
  list-style: disc outside;
  margin-left: 5%;}
.liste ul li a h5, .liste ul li a h6, .liste ul li h5 {
  white-space: nowrap;
  overflow: hidden;
  display: inline;
}
#content {
  width: 100%;
  max-width: 2100px;
  margin: 0;
  font-size: 75%; /* von 16px: 12px --> 1em */}
/*--------------------------------------------------------------------*/
/*-------------------------------------------------------------------*/
#head {
  width: 100%;
  text-align: center;}
#headbox {
  width: 100%;
  padding: 0;}
/*--------------Mobile Navigation --------------------------------------*/
/*-----------------------------------------------------------------------*/
/* Mobile Navigation bis 1024px danach fix */
#navbox {
  position: absolute;
  left: 5px;
  top: 10px;
  z-index: 30;
  background: transparent;
  margin:0;}
label {
  position: relative;
  bottom: 2px;
  left: 0px;
  cursor: pointer;}
label#navmobile::before {
  content: attr(data-icon) url('../images/icons/menue_black.png');
  -moz-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);}
label#navmobile:hover::before {
  content: attr(data-icon) url('../images/icons/menue.png');
  -moz-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);}
#expander {
  display: none;}
#expandee {
  max-height: 0;
  width: 250px;
  transition: max-height 0.8s linear;
  overflow: hidden;
  background-color: rgb(217,217,217); /*hellgrau*/
  background-color: rgba(217,217,217,0.9);
  -moz-box-shadow: rgb(133,132,131) 3px 3px 4px;
  -webkit-box-shadow: rgb(133,132,131) 3px 3px 4px;
  -o-box-shadow: rgb(133,132,131) 3px 3px 4px;
  -ms-box-shadow: rgb(133,132,131) 3px 3px 4px;
  box-shadow: rgb(133,132,131) 3px 3px 4px;}
#expander:checked ~ #expandee {
  max-height: 500px;}
#expandee a, #expandee a:visited {
  text-decoration: none;
  color: rgb(80,80,80);
  display: block;
  padding: 4px;}
#expandee ul {
  list-style: none;
  margin: 0;
  width: 98%;
  margin-left: 1%;
  min-height: 35px;}
#expandee ul li  {
  background-color: transparent;
  min-height: 35px;
  transition: 0.5s ease;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid rgb(109,109,109); /*dunkelgrau*/}
#expandee ul li:hover, #expandee ul li:target, #expandee ul li:focus {
  min-height: 35px;
  background-color: rgb(177,177,177); /* dünkler grau */
  background-color: rgba(177,177,177,0.9);}
#expandee ul li h2 {
  padding-top: 6px;
  font-size: 1.2em;
  font-weight: bold;
  color: rgb(80,80,80);
  transition: color 0.5s ease;}
#expandee ul li h2:hover, #expandee ul li h2:target, #expandee ul li h2:focus {
  color: rgb(84,131,195);} /* blau*/
#expandee ul li:last-child {
  border: none;}
 /* Einbindung Icons für mobile Navigation:*/
a#mobile-haushalt[data-icon]::before {
  content: attr(data-icon) url('../images/icons/haushaltselektronik_black.png');}
a#mobile-haushalt[data-icon]:hover::before {
  content: attr(data-icon) url('../images/icons/haushaltselektronik.png'); }
a#mobile-unterhaltung[data-icon]::before {
  content: attr(data-icon) url('../images/icons/unterhaltungselektronik_black.png');}
a#mobile-unterhaltung[data-icon]:hover::before {
  content: attr(data-icon) url('../images/icons/unterhaltungselektronik.png'); }
a#mobile-computer[data-icon]::before {
  content: attr(data-icon) url('../images/icons/computer_black.png');}
a#mobile-computer[data-icon]:hover::before {
  content: attr(data-icon) url('../images/icons/computer.png'); }
a#mobile-handy[data-icon]::before {
  content: attr(data-icon) url('../images/icons/mobiltelefonie_black.png');}
a#mobile-handy[data-icon]:hover::before {
  content: attr(data-icon) url('../images/icons/mobiltelefonie.png'); }
a#mobile-zubehoer[data-icon]::before {
  content: attr(data-icon) url('../images/icons/zubehoer_black.png');}
a#mobile-zubehoer[data-icon]:hover::before {
  content: attr(data-icon) url('../images/icons/zubehoer.png'); }
a#mobile-auto[data-icon]::before {
  content: attr(data-icon) url('../images/icons/autozubehoer_black.png');}
a#mobile-auto[data-icon]:hover::before {
  content: attr(data-icon) url('../images/icons/autozubehoer.png'); }
a#mobile-service[data-icon]::before {
  content: attr(data-icon) url('../images/icons/service_black.png');}
a#mobile-service[data-icon]:hover::before {
  content: attr(data-icon) url('../images/icons/service.png'); }
a#mobile-partner[data-icon]::before {
  content: attr(data-icon) url('../images/icons/partner_black.png');}
a#mobile-partner[data-icon]:hover::before {
  content: attr(data-icon) url('../images/icons/partner.png'); }
a#mobile-kontakt[data-icon]::before {
  content: attr(data-icon) url('../images/icons/kontakt_black.png');}
a#mobile-kontakt[data-icon]:hover::before {
  content: attr(data-icon) url('../images/icons/kontakt.png'); }
a#mobile-sitemap[data-icon]::before {
  content: attr(data-icon) url('../images/icons/sitemap_black.png');}
a#mobile-sitemap[data-icon]:hover::before {
  content: attr(data-icon) url('../images/icons/sitemap.png'); }
a#mobile-datenschutz[data-icon]::before {
  content: attr(data-icon) url('../images/icons/datenschutz_black.png');}
a#mobile-datenschutz[data-icon]:hover::before {
  content: attr(data-icon) url('../images/icons/datenschutz.png'); }
a#mobile-impressum[data-icon]::before {
  content: attr(data-icon) url('../images/icons/impressum_black.png');}
a#mobile-impressum[data-icon]:hover::before {
  content: attr(data-icon) url('../images/icons/impressum.png'); }
a#mobile-home[data-icon]::before {
  content: attr(data-icon) url('../images/icons/home_black.png');}
a#mobile-home[data-icon]:hover::before {
  content: attr(data-icon) url('../images/icons/home.png'); }

a#mobile-haushalt[data-icon]::before, a#mobile-unterhaltung[data-icon]::before, a#mobile-computer[data-icon]::before, a#mobile-handy[data-icon]::before, a#mobile-zubehoer[data-icon]::before, a#mobile-auto[data-icon]::before, a#mobile-service[data-icon]::before, a#mobile-home[data-icon]::before, a#mobile-kontakt[data-icon]::before, a#mobile-partner[data-icon]::before, a#mobile-impressum[data-icon]::before, a#mobile-datenschutz[data-icon]::before, a#mobile-sitemap[data-icon]::before {
  margin-right: 4px;
  margin-left: 1px;
  position: relative;
  float: left;
  margin-top: 2px;
  -moz-transform: scale(0.7);
  -o-transform: scale(0.7);
  -webkit-transform: scale(0.7);
  -ms-transform: scale(0.7);
  transform: scale(0.7);}

/*-----------------------------------------------------------------------------------------------------------------*/
/*-----------------Topheader und Icons ---------------------------*/
#topheader {
  width: 100%;
  top: 0;
  background-color: rgb(217,217,217); /*hellgrau*/
  background-color: rgba(217,217,217,0.9);
  color: rgb(80,80,80);}
#topcontent {
  width: 98%;
  margin-left: 1%;
  text-align: right;
  min-height: 35px;
  vertical-align: middle;
  padding-top: 0.5em;
  padding-bottom: 0.5em;}
#topcontent a:link, #topcontent a:visited, #topcontent a:active {
  text-decoration: none;
  color: rgb(80,80,80);
  transition: color 0.5s ease;}
#topcontent a:hover, #topcontent a:target, #topcontent a:focus {
  text-decoration: none;
  color: rgb(84,131,195);} /*blau*/
  /*-------Styles Inhalte Topheaderbox----------*/
span#facebooktop[data-icon]::before {
  content: attr(data-icon) url('../images/icons/facebook_black.png');
  margin-left: 1em;}
span#facebooktop[data-icon]:hover::before {
  content: attr(data-icon) url('../images/icons/facebook.png');}
span#phonetop[data-icon]::before {
  content: attr(data-icon) url('../images/icons/phone_black.png');
  position: relative;
  margin-left: 1em;
  margin-bottom: 5px;}
span#phonetop[data-icon]:hover::before {
  content: attr(data-icon) url('../images/icons/phone.png');}
span#datenschutztop[data-icon]::before {
  content: attr(data-icon) url('../images/icons/datenschutz_black.png');
  margin-left: 1em;}
span#datenschutztop[data-icon]:hover::before {
  content: attr(data-icon) url('../images/icons/datenschutz.png');}
span#kontakttop[data-icon]::before {
  content: attr(data-icon) url('../images/icons/kontakt_black.png');
  margin-left: 1em;}
span#kontakttop[data-icon]:hover::before {
  content: attr(data-icon) url('../images/icons/kontakt.png');}
span#facebooktop[data-icon]::before, span#phonetop[data-icon]::before, span#datenschutztop[data-icon]::before, span#kontakttop[data-icon]::before  {
 -moz-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);}
/* Einbindung Data Tooltip Telefonnummernanzeige */
[data-tooltip] {
  position: relative;
  display: inline-block;}
[data-tooltip]::before {
  content: "";
  position: absolute;
  visibility: hidden;
  -moz-opacity: 0;
  -o-opacity: 0;
  -webkit-opacity: 0;
  -ms-opacity: 0;
  opacity: 0;
  width: 0;
  margin-top: -5px;
  border: 1px solid transparent;
  border-bottom: 10px solid rgba(147,147,147,0.8); /* dunkelgrau*/
  border-top: none;
  z-index: 90;
  transition: 0.3s;}
[data-tooltip]:hover::before, [data-tooltip]:focus::before, [data-tooltip]:target::before  {
  visibility: visible;
  -moz-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  -ms-opacity: 1;
  opacity: 1;
  width: 0;
  margin-top: 1px;}
.tooltip::before {
  top: 100%;
  left: 55%;}
span.tooltip {
  line-height: 1.1em;}
/* Hintergrund für "tooltip" Fläche mit ::after */
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  visibility: hidden;
  -moz-opacity: 0;
  -o-opacity: 0;
  -webkit-opacity: 0;
  -ms-opacity: 0;
  opacity: 0;
  margin-top: -1px;
  padding: 8px 10px;
  background: rgb(227,227,227); /*hellgrau*/
  font-size: 0.9em;
  line-height: 1.4em;
  white-space: nowrap;
  color: rgb(14,27,78);
  -moz-box-shadow: rgb(133,132,131) 3px 3px 4px;
  -webkit-box-shadow: rgb(133,132,131) 3px 3px 4px;
  -o-box-shadow: rgb(133,132,131) 3px 3px 4px;
  -ms-box-shadow: rgb(133,132,131) 3px 3px 4px;
  box-shadow: rgb(133,132,131) 3px 3px 4px;
  z-index: 90;
  transition: 0.3s;}
[data-tooltip]:hover::after, [data-tooltip]:focus::after, [data-tooltip]:target::after{
  visibility: visible;
  -moz-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  -ms-opacity: 1;
  opacity: 1;
  margin-top: 4px;}
.tooltip::after {
  top: 100%;
  left: -50%;
  margin-left: -20%;}
/*--------------------------------------------------------------------*/
/*-------------------------------------------------------------------*/
/* Hauptnavigation ab 1024px mit 8 Navigationspunkten */
#mainnav {
  width: 100%;
  display: none;
  vertical-align: top;
  height: 35px;
  background: transparent;
  margin-top: -5px;}
#mainnavbox li {
  position: relative;
  float: left;
  text-align: center;
  height: 35px;
  list-style-type: none;
  white-space: nowrap;}
li#mainnav1, li#mainnav5 {
width: 15%;
}
li#mainnav3 {
 width: 17%;}
li#mainnav2 {
  width: 12%;}
li#mainnav4,  li#mainnav7, li#mainnav9 {
 width: 9%;}
li#mainnav6, li#mainnav8 {
 width: 7%;
}
/*-----------------------------------------------------------------------*/
/* Styles für DropDown Menüs*/
#mainnavbox ul ul {
  position: absolute;
  padding: 0;
  min-width: 150px;
  background-color: rgb(217,217,217); /*hellgrau*/
  background-color: rgba(217,217,217,0.9);
  -moz-box-shadow: rgb(133,132,131) 3px 3px 4px;
  -webkit-box-shadow: rgb(133,132,131) 3px 3px 4px;
  -o-box-shadow: rgb(133,132,131) 3px 3px 4px;
  -ms-box-shadow: rgb(133,132,131) 3px 3px 4px;
  box-shadow: rgb(133,132,131) 3px 3px 4px;
  z-index: -50;
  top: 0px;
 font: 0/0;  /* blendet Unternavigation mit negativem z-Index aus, position: absolute hebt Objekt aus dem Kontekt heraus und Angabe font 0/0 lässt Schrift verschwinden */}
#mainnavbox ul li:hover ul, #mainnavbox ul li:target ul, #mainnavbox ul li:link ul {
  top: 35px;
  z-index: 30;
  font: inherit;}
#mainnavbox ul ul li {
	float: none;
	height: 35px;
	width: 100%;
	border-bottom: 1px solid rgb(109,109,109); /*dunkelgrau*/}
#mainnavbox ul ul li:last-child {
	border: none;}
#mainnavbox ul ul li:hover {
	background-color: rgb(167,192,228); /* blau */
  background-color: rgba(167,192,228,0.9);
  transition: background 0.5s ease;}
/*-----------------------------------------------------------------*/
li#mainnav1, li#mainnav2, li#mainnav3, li#mainnav4, li#mainnav5, li#mainnav6, li#mainnav7, li#mainnav9, li#mainnav8 {
  background: rgb(217,217,217); /*hellgrau*/
  background: -moz-linear-gradient(rgb(177,179,180), rgb(179,174,171)13%, rgb(231,231,232)48%, rgb(179,174,171)85%, rgb(214,209,205)100%);
  background: -webkit-linear-gradient(rgb(177,179,180), rgb(179,174,171)13%, rgb(231,231,232)48%, rgb(179,174,171)85%, rgb(214,209,205)100%);
  background: -ms-linear-gradient(rgb(177,179,180), rgb(179,174,171)13%, rgb(231,231,232)48%, rgb(179,174,171)85%, rgb(214,209,205)100%);
  background: -o-linear-gradient(rgb(177,179,180), rgb(179,174,171)13%, rgb(231,231,232)48%, rgb(179,174,171)85%, rgb(214,209,205)100%);
  background: linear-gradient(rgba(177,179,180,0.9), rgba(179,174,171,0.9)13%, rgba(231,231,232,0.9)48%, rgba(179,174,171,0.9)85%, rgba(214,209,205.0.9)100%);
  transition: all 0.5s ease;
  text-align: center;
  border-left: 1px solid rgb(109,109,109); /*dunkelgrau*/ }
li#mainnav8 { border-right: 1px solid rgb(109,109,109);}
li#mainnav1:hover, li#mainnav1:focus, li#mainnav1:target, li#mainnav2:hover, li#mainnav2:focus, li#mainnav2:target, li#mainnav3:hover, li#mainnav3:focus, li#mainnav3:target, li#mainnav4:hover, li#mainnav4:focus, li#mainnav4:target, li#mainnav5:hover, li#mainnav5:focus, li#mainnav5:target, li#mainnav6:hover, li#mainnav6:focus, li#mainnav6:target, li#mainnav7:hover, li#mainnav7:focus, li#mainnav7:target, li#mainnav8:hover, li#mainnav8:focus, li#mainnav8:target, li#mainnav9:hover, li#mainnav9:focus, li#mainnav9:target {
  background: rgb(84,131,195); /* Fallbackfarbe BacherTech blau */
  background: -moz-linear-gradient(rgb(84,131,195), rgb(135,172,215)20%, rgb(200,214,235)39%, rgb(232,237,246)50%, rgb(125,144,173)76%, rgb(57,85,126)93%, rgb(184,131,195)100%);
  background: -webkit-linear-gradient(rgb(84,131,195), rgb(135,172,215)20%, rgb(200,214,235)39%, rgb(232,237,246)50%, rgb(125,144,173)76%, rgb(57,85,126)93%, rgb(84,131,195)100%);
  background: -ms-linear-gradient(rgb(84,131,195), rgb(135,172,215)20%, rgb(200,214,235)39%, rgb(232,237,246)50%, rgb(125,144,173)76%, rgb(57,85,126)93%, rgb(84,131,195)100%);
  background: -o-linear-gradient(rgb(84,131,195), rgb(135,172,215)20%, rgb(200,214,235)39%, rgb(232,237,246)50%, rgb(125,144,173)76%, rgb(57,85,126)93%, rgb(84,131,195)100%);
  background: linear-gradient(rgba(84,131,195,0.9), rgba(135,172,215,0.9)20%, rgba(200,214,235,0.9)39%, rgba(232,237,246,0.9)50%, rgba(125,144,173,0.9)76%, rgba(57,85,126,0.9)93%, rgba(84,131,195,0.9)100%);
}

#mainnav li h1 {
  font-size: 1.2em;
  vertical-align: middle;
  padding-top: 10px;
  padding-right: 2px;
  padding-bottom: 5px;
  font-weight: bold;
  color: rgb(80,80,80);
  transition: color 0.5s ease;}
#mainnav li h2 {
  font-size: 1em;
  vertical-align: middle;
  padding-top: 10px;
  padding-left: 1em;
  padding-right: 0.5em;
  padding-bottom: 5px;
  font-weight: bold;
  color: rgb(80,80,80);
  transition: color 0.5s ease;}
#mainnav li h2:hover {
  color: rgb(144,144,144); /* mittelgrau */
  text-decoration: none;}
#mainnav li h1:hover {
  color: rgb(84,131,195); /* blau */
  text-decoration: none;
}
li#mainnav1[data-icon]::before {
  content: attr(data-icon) url('../images/icons/haushaltselektronik_black.png');
  margin-left: 5px;
  margin-top: 3px;}
li#mainnav1[data-icon]:hover::before, li#mainnav1[data-icon]:target::before, li#mainnav1[data-icon]:focus::before {
  content: attr(data-icon) url('../images/icons/haushaltselektronik.png');}
li#mainnav2[data-icon]::before {
  content: attr(data-icon) url('../images/icons/unterhaltungselektronik_black.png');
  margin-left: 5px;
  margin-top: 3px;}
li#mainnav2[data-icon]:hover::before, li#mainnav2[data-icon]:target::before, li#mainnav2[data-icon]:focus::before {
  content: attr(data-icon) url('../images/icons/unterhaltungselektronik.png');}
li#mainnav3[data-icon]::before {
  content: attr(data-icon) url('../images/icons/computer_black.png');
  margin-left: 5px;
  margin-top: 3px;}
li#mainnav3[data-icon]:hover::before, li#mainnav3[data-icon]:target::before, li#mainnav3[data-icon]:focus::before {
  content: attr(data-icon) url('../images/icons/computer.png');}
li#mainnav4[data-icon]::before {
  content: attr(data-icon) url('../images/icons/zubehoer_black.png');
  margin-left: 5px;
  margin-top: 3px;}
li#mainnav4[data-icon]:hover::before, li#mainnav4[data-icon]:target::before, li#mainnav4[data-icon]:focus::before {
  content: attr(data-icon) url('../images/icons/zubehoer.png');}
li#mainnav5[data-icon]::before {
  content: attr(data-icon) url('../images/icons/mobiltelefonie_black.png');
  margin-left: 5px;
  margin-top: 3px;}
li#mainnav5[data-icon]:hover::before, li#mainnav5[data-icon]:target::before, li#mainnav5[data-icon]:focus::before {
  content: attr(data-icon) url('../images/icons/mobiltelefonie.png');}
li#mainnav6[data-icon]::before {
  content: attr(data-icon) url('../images/icons/autozubehoer_black.png');
  margin-left: 5px;
  margin-top: 3px;}
li#mainnav6[data-icon]:hover::before, li#mainnav6[data-icon]:target::before, li#mainnav6[data-icon]:focus::before {
  content: attr(data-icon) url('../images/icons/autozubehoer.png');}
li#mainnav7[data-icon]::before {
  content: attr(data-icon) url('../images/icons/service_black.png');
  margin-left: 5px;
  margin-top: 3px;}
li#mainnav7[data-icon]:hover::before, li#mainnav7[data-icon]:target::before, li#mainnav7[data-icon]:focus::before {
  content: attr(data-icon) url('../images/icons/service.png');}
li#mainnav8[data-icon]::before {
  content: attr(data-icon) url('../images/icons/home_black.png');
  margin-left: 5px;
  margin-top: 3px;}
li#mainnav8[data-icon]:hover::before, li#mainnav8[data-icon]:target::before, li#mainnav8[data-icon]:focus::before {
  content: attr(data-icon) url('../images/icons/home.png');}
li#mainnav9[data-icon]::before {
  content: attr(data-icon) url('../images/icons/partner_black.png');
  margin-left: 5px;
  margin-top: 3px;}
li#mainnav9[data-icon]:hover::before, li#mainnav9[data-icon]:target::before, li#mainnav9[data-icon]:focus::before {
  content: attr(data-icon) url('../images/icons/partner.png');}

li#mainnav1[data-icon]::before, li#mainnav2[data-icon]::before, li#mainnav3[data-icon]::before, li#mainnav4[data-icon]::before, li#mainnav5[data-icon]::before, li#mainnav6[data-icon]::before, li#mainnav7[data-icon]::before, li#mainnav8[data-icon]::before, li#mainnav9[data-icon]::before {
 -moz-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);
  float: left;
  position: relative;}
/*--------------------------------------------------------------------*/
/*--------------------------------------------------------------------*/
/* ---Styles für Footer mit einer Footboxliste und smalltext*/
#foot {
  width: 100%;
  clear: both;
  float: none;	
  margin-top: 0;
  text-align: center;}
#footbox {
  width: 100%;
  max-width: 2100px;
  padding: 5px;
  padding-bottom: 0.5em;
  position: fixed;
  z-index: 20;
  min-height: 30px;
  left: 0;
  bottom: 0px;
  background-color: rgb(217,217,217); /*hellgrau*/
  background-color: rgba(217,217,217,0.9);
  color: black;
  transition: color 0.5s ease;}
#footbox a:link, #footbox a:visited, #footbox a:active {
  text-decoration: none;
  color: black;}
#footbox a:hover {
  text-decoration: none;
  color: rgb(84,131,195); /*blau*/}
#footbox1 {
  width: 100%;
  max-width: 591px;
  height: 20px;
  display: block;}
#footbox1 ul {
  list-style-type: none;
  text-decoration: none;
  text-align: left;
  padding-bottom: -2em;
  }
#footbox1 ul li {
  float: left;
  list-style-type: none;
  white-space: nowrap;}
#footbox1 ul li h4 {
  font-size: 0.9em;
  margin-right: 0.1em;
  margin-left: 0.3em;
  color: black;}
#footbox1 ul li h4::after {
  content: '\007C';  /*  U+007C | */
  color: black;}
#footbox ul li h4::after:hover {
  color: black;}
#footbox1 h4:link, #footbox1 h4:visited, #footbox1 h4:active {
  text-decoration: none;
  color: black;}
#footbox1 h4:hover, #footbox1 h4:focus, #footbox1 h4:target {
  color: rgb(84,131,195); /*blau*/}

#foottext {
  width: 100%;
  max-width: 591px;
  height: 20px;
  text-align: right;
  margin-bottom: 0.2em;
  display: block;
  }
#footbox small {
  font-family: Helvetica, Myriad, Arial, sans-serif;
  font-size: 0.95em; /* gemmessen an content ---> 9.88px */
  font-style: normal;
  font-weight: bold;
  color: black;}

/*------------------------------------------------------------------*/
/*------------------------------------------------------------------*/
/* -----------------------------Hauptinhaltsboxen-------------------- */
#maincontent {
  width: 100%;
  max-width: 2100px;
  clear: both;
  min-height: 750px;
  margin-bottom: 0.5em;}
#main {
  width: 98%;
  margin-left: 1%;}
/* Angaben für Hauptinhaltsboxen mit Basisangaben */
.maininside {
  width: 100%;
  /* Schriftgröße in Relation zu den 10.4px des Contents -> Vererbung!! */
  font-size: 1em; /*12px */
  /* text-align: justify; blocksatz*/
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  -o-hyphens: auto;
  -ms-hyphens: auto; /*silbentrennung*/
  hyphens: auto;
  margin-top: 0.5em;
  padding-bottom: 0.5em;
  line-height: 1.2em;}
.maininside a:link, .maininside a:visited, .maininside a:active {
   color: rgb(80,80,80);
   text-decoration: none;}
.maininside a:hover {
   color: rgb(84,131,195); /*blau*/
   text-decoration: none;}
.maininside em a:hover {
  color: rgb(84,131,195); /*blau*/
  text-decoration: none;}
.maininside small {
  line-height: 1em;
}
/* Inhaltsboxen für maininside: Ausgabgebreite: 100% -->main 98% = 1000px; bis 1024px bzw. ab 1023px: sollen Boxen nebeneinender stehen */
/* container für Text */
/* für datenschutzseite */
.mainbig {
  width: 100%;
  margin-top: 0.5em;
  margin-bottom: 1em;}
.textboxbig {
  width: 90%; /* gemessen an mainleft 100%--> 1000px */
  margin-left: 5%;
  padding: 0.5em;
  background-color: rgb(217,217,217); /*hellgrau*/
  background-color: rgba(217,217,217,0.9);
  -moz-border-radius: 20px 20px;
  -o-border-radius: 20px 20px;
  -webkit-border-radius: 20px 20px;
  -ms-border-radius: 20px 20px;
  border-radius: 20px 20px;
  min-height: 30em;
  margin-bottom: 1em; }

.mainleft {
  width: 100%;
  max-width: 1000px;
  margin-top: 0.5em;
  margin-bottom: 1em;}

.textbox {
  width: 90%; /* gemessen an mainleft 100%--> 1000px */
  max-width: 980px;
  margin-left: 5%;
  padding: 0.5em;
  background-color: rgb(217,217,217); /*hellgrau*/
  background-color: rgba(217,217,217,0.8);
  -moz-border-radius: 20px 20px;
  -o-border-radius: 20px 20px;
  -webkit-border-radius: 20px 20px;
  -ms-border-radius: 20px 20px;
  border-radius: 20px 20px;
  min-height: 30em;
  margin-bottom: 1em; }
.textbox h2, .textboxbig h2 {
  text-align: right;
  color: rgb(84,131,195); /*blau */}
.textboxright, .textboxleft {
  width: 100%;
  display: block;
}
/* Klasse für zweispaltigen Text / Inhalt bis 591px einspaltig
.column {
  -moz-column-count: 1;
  -webkit-column-count: 1;
  -o-column-count: 1;
  column-count: 1;
  height: 100%;
  min-height: 29.5em}  */
/* container für 4 Bilder oder Diashow*/
.mainright {
  width: 100%;
  max-width: 1000px;
  margin-top: 0.5em;}
.mainrightinside {
  width:100%;}
/*---------------------------------------------------------------------------*/
/* Einbindung der Full HG Bilder */
/*-------------------------------------------------------------------------------*/
/* Full-Hg Bilderfader für 5 Bilder ab 1024px */
/* Animationsdauer für jeden span 30sec, Laufzeit unendlich, Verzögerung über animation-delay bei jedem einzelnen Bild */
#bigcontent {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  z-index: -30;
  background: rgb(240,240,240);}

/* Einbindung der statischen Full HG Bilder */
.hgbilderstatic {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: -10;
  background: rgb(240,240,240);}
.hgbilderstatic span {
  width: 100%;
  min-height: 900px;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -9;}
#hgwillkommen, #hghaushalt, #hgunterhaltung, #hgcomputer, #hgzubehoer, #hgauto, #hgservice, #hghandy, #hgpartner #hgkontakt, #hgimpressum, #hgsitemap, #hgdatenschutz {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: -9;
  width: 100%;
  height: 100%;
  -moz-opacity: 0.8;
  -webkit-opacity: 0.8;
  -o-opacity: 0.8;
  -ms-opacity: 0.8;
  opacity: 0.8;
  background-position: center;
  background-repeat: no-repeat;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  -ms-background-size: cover;
  background-size: cover;
  padding: 0;
  margin: 0;}
#hgwillkommen {
  background-image: url('../images/hg_bilder/Bacher_Tech_Geschaeft_Innenansicht.jpg');}
#hghaushalt {
  background-image: url('../images/hg_bilder/hg_kueche.jpg');}
#hgunterhaltung {
  background-image: url('../images/hg_bilder/hg_fernseher_radio.jpg');}
#hgcomputer {
  background-image: url('../images/hg_bilder/hg_computer.jpg');}
#hgzubehoer {
  background-image: url('../images/hg_bilder/hg_zubehoer.jpg');}
#hgauto {
  background-image: url('../images/hg_bilder/hg_autozubehoer.jpg');}
#hgservice {
  background-image: url('../images/hg_bilder/hg_internet.jpg');}
#hghandy {
  background-image: url('../images/hg_bilder/hg_handy.jpg');}
#hgpartner {
  background-image: url('../images/hg_bilder/Full_HG_beton.jpg');}
#hgkontakt {
  background-image: url('../images/hg_bilder/Bacher_Tech_Geschaeft.jpg');}
#hgimpressum {
  background-image: url('../images/hg_bilder/Geschaeft_Bacher_Tech_Innenansicht.jpg');}
#hgsitemap {
  background-image: url('../images/hg_bilder/hg_computer_internet.jpg');}
#hgdatenschutz {
  background-image: url('../images/hg_bilder/hg_computer_internet.jpg');}


/*---------------------------------------------------------------------------------*/
/* Boxen für Bilder und Fader und Slider */
/* quadratische Bilder und Bilderfader in rechter Box - zuerst unterhalb - ab 1024px rechts*/
.diabox, .bildbox {
  width: 23%;
  margin-bottom: 0.2em;
  max-width: 230px; /* gemessen an max-width größe von mainleft-->1000px */
  text-align: center;
  margin-left: 1.5%;
  margin-top: 1em;
  float: left;}
.bildbox img {
  -moz-border-radius: 20px 20px;
  -o-border-radius: 20px 20px;
  -webkit-border-radius: 20px 20px;
  -ms-border-radius: 20px 20px;
  border-radius: 20px 20px;
}

/* längliche Bild- und Diabox (doppelte Länge wie quad.) */
.diaboxlong, .bildboxlong {
  width: 46%;
  margin-top: 1em;
  margin-bottom: 0.2em;
  max-width: 460px; /* gemessen an max-width größe von mainleft-->1000px */
  text-align: center;
  margin-left: 2.6%;
  float: left;}

/*--------------------------------------------------------------------*/
/*--------------------------------------------------------------------*/
/* Styles für Text */
h1, h2, h3, h4, h5, h6 {
  font-family: Myriad, Helvetica, Arial, Trebuchet, Verdana, sans-serif;
  font-weight: bold; color: rgb(80,80,80);
  padding: 0; margin: 0; text-align: left;}
h1 {font-size: 1.4em; /* 15px -> in Relation zu Content-Schriftgröße */
  line-height: 1.2em;}
h1 a:link, h1 a:visited, h1 a:active {color: rgb(80,80,80);}
h1 a:hover {color: rgb(84,131,195); }  /*blau*/
h2 {font-size: 1.35em; /* 13,5px */
  line-height: 1.2em;}
h2 a:link, h2 a:visited, h2 a:active {color: rgb(80,80,80);}
h2 a:hover {color: rgb(84,131,195);}  /*blau*/
h3 {font-size: 1.3em; /* 13px */line-height: 1.2em;}
h3 a:link, h3 a:visited, h3 a:active {color: rgb(80,80,80);}
h3 a:hover {color: rgb(84,131,195);}
h4 {font-size: 1.2em; /* 12,48px */
  line-height: 1.2em;}
h4 a:link, h4 a:visited, h4 a:active {color: rgb(80,80,80);}
h4 a:hover {color: rgb(84,131,195);}
h5 {font-size: 1.1em; /* 12px */
  line-height: 1.2em;}
a h5:hover, a h5:focus, a h5 target {
  color: rgb(84,131,195);}
a h6:hover, a h6:focus, a h6 target {
  color: rgb(84,131,195);}
h5 a:link, h5 a:visited, h5 a:active {color: rgb(80,80,80);}
h5 a:hover {color: rgb(84,131,195);}
h6 {font-size: 1em; /* 11px */
  line-height: 1.2em;
  color: rgb(80,80,80);}
h6 a:link, h6 a:visited, h6 a:active {color: rgb(80,80,80);}
h6 a:hover {color: rgb(84,131,195);}
small {
  font-family: Myriad, Helvetica, Arial, Trebuchet, Verdana, sans-serif;
  font-size: 1em; /* 11px */
  font-style: normal;
  font-weight: normal;
  color: rgb(80,80,80);
  padding: 0; margin: 0; text-align: left;}
small a:link, small a:active, small a:visited {
  color: rgb(80,80,80); text-decoration: none;}
small a:hover {
  color: rgb(84,131,195); text-decoration: none;}
em {
  font-family: Myriad, Helvetica, Arial, Trebuchet, Verdana, sans-serif;
  font-size: 1em; /* 12px */
  font-style: normal;
  line-height: 1.2em;
  color: rgb(80,80,80); font-weight: bold;}
em a:link, em a:active, em a:visited {
  color: rgb(80,80,80); text-decoration: none;}
em a:hover {color: rgb(84,131,195);
  text-decoration: none;}
a em:link, a em:active, a em:visited {color: rgb(80,80,80);
  text-decoration: none;}
a em:hover {color: rgb(84,131,195); text-decoration: none;}
strong {color: rgb(84,131,195); font-weight: bold;}
strong a:link, strong a:active, strong a:visited {color: rgb(84,131,195); text-decoration: none;}
strong a:hover {color: rgb(80,80,80); text-decoration: none;}
span a:link, span a:active, span a:visited, span a:hover {
  text-decoration: none;}
span:link, span:active, span:visited, span:hover {
  text-decoration: none;}
 /*--------------------------------------------------------------------*/
/*-------------------------------INHALTE  --------------------------------*/
/*--------------------------------------------------------------------*/
.textbox #iframebox {
  width: 80%;
  max-width: 350px;
  margin-left: 10%;
  position: relative;}
.textbox #iframebox::before {
  content: "";
  display: block;
  padding-top: 100%;}
iframe {
  display: block;
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  -moz-border-radius: 20px 20px;
  -o-border-radius: 20px 20px;
  -webkit-border-radius: 20px 20px;
  -ms-border-radius: 20px 20px;
  border-radius: 20px 20px;}
/*--------------------------------------------------------------------*/
/* Seiten mit overflow agb und Datenschutz */
.overflow {
  height: 40em;
  overflow-y: scroll;
  }
/*--------------------cookie Hinweisbox ----------------------------------*/
#cookiehinweisbox {
	display: block;
	z-index: 100;
	position: fixed;
	bottom: 0px;
	min-height: 30px;
	padding: 5px;
	margin: 0;
	width: 100%;
  font-size: 0.9em;
  font-weight: bold;
	color: black;
	border: 1px solid black;
	border-bottom: none;
	background: rgb(217,217,217); /*hellgrau */
}
/* ok Button */
button {
 width: 4em;
 height: 3em;
 background-color: rgb(177,177,177);
 color: rgb(80,80,80);
 font-weight: bold;
 text-align: center;
 margin-left: 1em;
 transition: color 0.5s ease;}
button:hover, button:target, button:focus {
 color: rgb(84,131,195);
}
/*------Sitemap-------------*/

/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/
/* media Query Styles ab 480px */
/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/
@media screen and (min-width:30em) {
.maininside {
  font-size: 1.1em; }/*13.2x */
/*---------------------------------------------------------------*/
}
/*-------------------------------------------------------------------*/
/*-------------------------------------------------------------------*/
/* media Query Styles ab 592px */
/*---------------------------------------------------------------*/
/*-------------------------------------------------------------------*/
@media screen and (min-width: 37em) {
#content {}

#navbox {
  left: 1.5em;}
/* Styles für Footboxen */
#footbox1 {
  width: 65%;
  float: left;}
#footbox1 ul {
  padding-top: 0.5em;}
#foottext {
  width: 35%;
  float:right;}
#footbox h1 {
  font-size: 1.5em;}
#footbox h2 {
  font-size: 1.4em;}
#footbox h3 {
  font-size: 1.3em;}
#footbox h4 {
  font-size: 1.2em;}
#footbox h5 {
  font-size: 1.1em;}
#footbox h6 {
  font-size: 1em;}
#footbox small {
  font-size: 0.95em; /* gemmessen an content ---> 10.64px */ }
#maincontent {}
/* Textstyles */
h1 {font-size: 1.45em; /* 17,4px */
  line-height: 1.2em;}
h2 {font-size: 1.3em; /* 15,6px */
  line-height: 1.1em;}
h3 {font-size: 1.25em; /* 15px */
  line-height: 1.1em;}
h4 {font-size: 1.2em; /* 14,4px */
  line-height: 1.1em;}
h5 {font-size: 1.15em; /* 13,8px */
  line-height: 1.1em;}
h6, em {font-size: 1.1em; /* 13,2px */
  line-height: 1.2em;}
small {font-size: 0.85em;}
/*-------------------------------------------------------------------*/
.textbox, .textboxbig {
  padding: 1em; }
.textboxright, .textboxleft {
  width: 50%;
  float: left;
}
/* mehrspaltiger Text, ab hier 2 Spalten */
.column {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  -o-column-count: 2;
  column-count: 2;
  column-gap: 1em;}

}

/*----------------------------------------------------------------*/
/*----------------------------------------------------------------*/
/* media Query Styles ab 800px */
/*----------------------------------------------------------------*/
/*----------------------------------------------------------------*/
@media screen and (min-width: 50em) {
#content {
  font-size: 83%; /* 13,3px--> 1em*/}
.mainbig, .mainleft, .mainright {
  margin-top: 1em;
}
.maininside {
  font-size: 1em; }
/* Styles für topheader */
span#facebooktop[data-icon]::before, span#phonetop[data-icon]::before, span#datenschutztop[data-icon]::before, span#kontakttop[data-icon]::before  {
 -moz-transform: scale(0.9);
  -o-transform: scale(0.9);
  -webkit-transform: scale(0.9);
  -ms-transform: scale(0.9);
  transform: scale(0.9);}
/* Styles für footboxen */
#footbox small {
  font-size: 0.85em;}
/*----------------------------------------------------------------------*/
/* Styles für Text */
h1 {font-size: 1.5em; /* 16,24px */line-height: 1.1em;}
h2 {font-size: 1.4em; /* 14,56px */line-height: 1em;}
h3 {font-size: 1.3em; /* 14px */line-height: 1em;}
h4 {font-size: 1.2em; /* 13,44px */line-height: 1.1em;}
h5 {font-size: 1.1em; /* 12,88px */line-height: 1em;}
h6, em {font-size: 1em; /* 13,2px */
  line-height: 1.2em;}
/*----------------------------------------*/
/*----------------------------------------------------------------*/
/*Styles für Inhalte */

  
  

}


/*----------------------------------------------------------------*/
/*----------------------------------------------------------------*/
/* media Query Styles ab 1024px */
/*---------------------------------------------------------------*/
/*----------------------------------------------------------------*/
/*----------------------------------------------------------------*/
@media screen and (min-width: 64em) {
#content {
  font-size: 88%; /* 13.6px--> 1em*/}

/* Styles für topheader */
span#facebooktop[data-icon]::before, span#phonetop[data-icon]::before, span#datenschutztop[data-icon]::before, span#kontakttop[data-icon]::before {
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);}
/* Styles für Hauptnavigationspunkte */
#mainnav {
  display: block;
  width: 100%;
  max-width: 2100px;}
li#mainnav1 h1, li#mainnav2 h1, li#mainnav3 h1, li#mainnav4 h1, li#mainnav5 h1, li#mainnav6 h1, li#mainnav7 h1, li#mainnav8 h1, li#mainnav9 h1 {
  padding-left: 0.2em;
  padding-top: 10px;
  padding-bottom: 4px;
  font-size: 1em;}

/* Styles für Hauptnavigationspunkte */
li#mainnav1[data-icon]::before {margin-left: 0.1em; margin-right: 0.2em;}
li#mainnav2[data-icon]::before {margin-left: 0.1em; margin-right: 0.2em;}
li#mainnav3[data-icon]::before {margin-left: 0.1em; margin-right: 0.2em;}
li#mainnav4[data-icon]::before {margin-left: 0.1em; margin-right: 0.2em;}
li#mainnav5[data-icon]::before {margin-left: 0.1em; margin-right: 0.2em;}
li#mainnav6[data-icon]::before {margin-left: 0.1em; margin-right: 0.2em;}
li#mainnav7[data-icon]::before {margin-left: 0.1em; margin-right: 0.2em;}
li#mainnav8[data-icon]::before {margin-left: 0.1em; margin-right: 0.2em;}
li#mainnav9[data-icon]::before {margin-left: 0.1em; margin-right: 0.2em;}
/*-----------------------------------------------------------------------------*/
/* Styles für inhalt*/
#hgwillkommen {
  display: none;}
/*HG Bilderfader Startseite ab 1024px */
.hgbilderfade5 {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: rgb(240,240,240);
  z-index: -10;}
.hgbilderfade5 li span {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  color:transparent;
  background-position: center;
  background-repeat: no-repeat;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  -ms-background-size: cover;
  background-size: cover;
  opacity: 0;
  z-index: -9;
  animation: hgfadefive 60s linear infinite 0s;}
.hgbilderfade5 li:nth-child(1) span {
  background-image: url('../images/hg_bilder/Geschaeft_Bacher_Tech_Innenansicht.jpg');}
.hgbilderfade5 li:nth-child(2) span {
  background-image: url('../images/hg_bilder/hg_autozubehoer.jpg');
  animation-delay: 12s;}
.hgbilderfade5 li:nth-child(3) span {
  background-image: url('../images/hg_bilder/Bacher_Tech_Geschaeft_Innenansicht.jpg');
  animation-delay: 24s;}
.hgbilderfade5 li:nth-child(4) span {
  background-image: url('../images/hg_bilder/hg_kueche.jpg');
  animation-delay: 36s;}
.hgbilderfade5 li:nth-child(5) span {
  background-image: url('../images/hg_bilder/hg_fernseher_radio.jpg');
  animation-delay: 48s;}
/* Einblendung Überblendung 5 Bilder*/
@-moz-keyframes hgfadefive {
  0% {opacity: 0; animation-timing-function: ease-in;}
  6.66% {opacity: 1; animation-timing-function: ease-out;}
  20% {opacity: 1;}
  26.66% {opacity: 0;}
  100% {opacity: 0;}
  }
@-webkit-keyframes hgfadefive {
  0% {opacity: 0; animation-timing-function: ease-in;}
  6.66% {opacity: 1; animation-timing-function: ease-out;}
  20% {opacity: 1;}
  26.66% {opacity: 0;}
  100% {opacity: 0;}
  }
@-ms-keyframes hgfadefive {
  0% {opacity: 0; animation-timing-function: ease-in;}
  6.66% {opacity: 1; animation-timing-function: ease-out;}
  20% {opacity: 1;}
  26.66% {opacity: 0;}
  100% {opacity: 0;}
  }
@-o-keyframes hgfadefive {
  0% {opacity: 0; animation-timing-function: ease-in;}
  6.66% {opacity: 1; animation-timing-function: ease-out;}
  20% {opacity: 1;}
  26.66% {opacity: 0;}
  100% {opacity: 0;}
  }
@keyframes hgfadefive {
   0% {opacity: 0; animation-timing-function: ease-in;}
  6.66% {opacity: 1; animation-timing-function: ease-out;}
  20% {opacity: 1;}
  26.66% {opacity: 0;}
  100% {opacity: 0;}
  }
/*-------------------------------------------------------------------------------------*/
#maincontent {
  margin-top: 1em;
  min-height: 600px;}
#main {
  width: 96%;
  margin-left: 2%;}
/* Hauptinhaltbox mit Basisangaben */
/* box für Text gemessen an main 96% von 2100px --> 2016px*/
.mainleft {
  width: 50%;
  max-width: 1008px;
  float: left;
  padding-top: 0;
  margin-top: 1em;
  margin-bottom: 1em;}
.textbox {
  width: 96%;
  max-width: 967px;
  margin-left: 3%;
  margin-top: 0;
  min-height: 32em;
  padding: 1.2em; }
.textboxbig {
  padding: 1.2em;
}

/* box für Diashow */
.mainright {
  width: 50%;
  max-width: 1008px;
  float: left;
  padding-top: 0;
  margin-top: 1em;
  margin-bottom: 1em;}
.mainrightinside {
  width: 90%;
  max-width: 907px;
  margin-left: 10%;
}
/* Boxen für Bilder und Fader und Slider */
/* quadratische Bilder und Bilderfader in rechter Box - zuerst unterhalb - ab 1024px rechts*/
.diabox, .bildbox {
  width: 44%;
  margin-bottom: 0.5em;
  margin-top: 0em;
  max-width: 399px; /* gemessen an max-width größe von mainrightinside-->907px */
  margin-left: 2%;
  float: left;}
/* längliche Bild- und Diabox (doppelte Länge wie quad.) */
.diaboxlong, .bildboxlong {
  width: 90%;
  margin-bottom: 0.6em;
  max-width: 800px; /* gemessen an max-width größe von mainrightinside-->907px */
  margin-left: 2%;
  margin-top: 0em;
  float: left;}
.maininside {
  font-size: 1em; /* 12px */
  margin-top: 1em;
  margin-bottom: 1em;
  padding: 5px;
  line-height: 1.2em;}
#footbox {
  position: relative;
  left: 0;
  bottom: 0px;
  z-index: 0;
  background-color: transparent; }

/* Angaben seiten agb und datenschutz */
.overflow {
height: 35em;}
  


}
/* Styles für Print */
@media print {
body {
  font-family: Arial, Helvetica, Verdana, sans-serif;
  font-size: 12px;
  color: black;
  background-color: white;}
#head {
  width: 100%;
  height: 100%;
  color: black;}
#topheader {
  display: none;}  
#mainnav {
  display: none;}

#maincontent {
  width: 100%;
  height: 100%;
  font-size: 12px;
  color: black;
  background-color: white;
  text-align: left;}
#footbox {
  display: none;}

}


/* @keyframe Regel zum Ein und Ausblenden eines Bildes, einblenden:*/
@-moz-keyframes fadein {
  0% { opacity: 0.1; }
  35% { opacity: 0.35; }
  65% { opacity: 0.65; }
  100% { opacity: 1; }
}
@-webkit-keyframes fadein {
  0% { opacity: 0.1; }
  35% { opacity: 0.35; }
  65% { opacity: 0.65; }
  100% { opacity: 1; }
}
@-ms-keyframes fadein {
  0% { opacity: 0.1; }
  35% { opacity: 0.35; }
  65% { opacity: 0.65; }
  100% { opacity: 1; }
}
@-o-keyframes fadein {
  0% { opacity: 0.1; }
  35% { opacity: 0.35; }
  65% { opacity: 0.65; }
  100% { opacity: 1; }
}
@keyframes fadein {
  0% { opacity: 0.1; }
  35% { opacity: 0.35; }
  65% { opacity: 0.65; }
  100% { opacity: 1; }
}

/*ausblenden:*/
@-moz-keyframes fadeout {
  from { opacity: 1; }
  to { opacity: 0; }
}
@-webkit-keyframes fadeout {
  from { opacity: 1; }
  to { opacity: 0; }
}
@-ms-keyframes fadeout {
  from { opacity: 1; }
  to { opacity: 0;}
}
@-o-keyframes fadeout {
  from { opacity:1; }
  to { opacity: 0; }
}
@keyframes fadeout {
  from { opacity: 1; }
  to { opacity: 0; }
}
.fadeo {
  opacity: 0.3;
-moz-animation-duration: 300ms;
-moz-animation-name: fadeout;
-webkit-animation-duration: 300ms;
-webkit-animation-name: fadeout;
-ms-animation-duration: 300ms;
-ms-animation-name: fadeout;
-o-animation-duration: 300ms;
-o-animation-name: fadeout;
  animation-duration: 300ms;
  animation-name: fadeout;
}
.fadei {
-moz-animation-duration: 600ms;
-moz-animation-name: fadein;
-webkit-animation-duration: 600ms;
-webkit-animation-name: fadein;
-ms-animation-duration: 600ms;
-ms-animation-name: fadein;
-o-animation-duration: 600ms;
-o-animation-name: fadein;
  animation-duration: 600ms;
  animation-name: fadein;
}