/* CSS Responsive Webdesign:*/
/*---------------------------------------------------------------*/
/*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: black;
  background: rgb(131,173,195); /*Fallbackfarbe */
  background-image: -moz-linear-gradient(to bottom, #085B88, #fff);
  background-image: -o-linear-gradient(to bottom, #085B88, #fff);
  background-image: -webkit-gradient(linear, center top, center bottom, from(#085B88), to(#fff)); /*ältere Webkit Browser */
  background-image: -webkit-linear-gradient(to bottom, #085B88, #fff);
  background-image: linear-gradient(to bottom, #085B88, #fff); /* modernste Version ohne Präfix */
}
hr {
border: 1px solid rgba(255,255,255,0.5); }
/* Bilder behalten inhärente Größe und werden gleichzeitig nie größer als der sie umgebende Bereich */ 
img, iframe {
  max-width: 100%;}
#iframebig {
  width: 80%;
  max-width: 400px;
  min-height: 250px;
  margin-left: 10%;
}
a img {
  text-decoration: none;
  border-style: none;}
a {
  text-decoration: none;
  margin: 0;
  padding: 0;
  color: rgb(14,27,78); /* dunkelblau */}
a:hover, a:target, a:focus {
  text-decoration: none;
  margin: 0;
  padding: 0;
  color: white; }
ul {
  text-decoration: none;
  margin: 0;
  padding: 0;}
address {
  font-style: normal;
  text-decoration: none;
  margin: 0;
  padding: 0;}
#content {
  width: 100%;
  max-width: 1200px;
  height: auto;
  min-height: 160em;
  background: transparent;
  margin: 0 auto;
  font-size: 70%; /* von 16px: 11,2px --> 1em */
  padding: 0;
  -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;}
/*--------------------------------------------------------------------*/
/*-------------------------------------------------------------------*/
#head {
  width: 100%;
  text-align: center;}
#headbox {
  vertical-align: top;
  width: 100%;
  margin: 0;
  padding: 0;}
/*--------------------------------------------------------------------*/
/*-------------------------------------------------------------------*/
#topheader {
  width: 100%;
  top: 0;}
#topcontent {
  width: 98%;
  margin-left: 1%;
  text-align: right;
  min-height: 35px;
  vertical-align: middle;
  padding-top: 0.5em;}
#topcontent a:link, #topcontent a:visited, #topcontent a:active {
  text-decoration: none;
  color: rgb(14,27,78); /* dunkelblau */
  transition: color 0.5s ease;}
#topcontent a:hover {
  text-decoration: none;
  color: white; /*white*/}
  
/*-------Styles Inhalte Topheaderbox----------*/
span#facebooktop[data-icon]::before {
  content: attr(data-icon) url('../images/facebook.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);}
span#phonetop[data-icon]::before {
  content: attr(data-icon) url('../images/menu_icons_bluemchen/phone.png');
  position: relative;
  margin-left: 2em;
  margin-bottom: 5px;
  -moz-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);}
span#phonetop[data-icon]:hover::before {
  content: attr(data-icon) url('../images/menu_icons_bluemchen/phone_hover.png');}
span#kontakttop[data-icon]::before {
  content: attr(data-icon) url('../images/menu_icons_bluemchen/kontakt.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);
  margin-right: 0.8em;
  margin-left: 1em;}
span#kontakttop[data-icon]:hover::before {
  content: attr(data-icon) url('../images/menu_icons_bluemchen/kontakt_hover.png');}
/* 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 rgb(231,232,237); /*dunkelblau 10%*/;
  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(231,232,237); /*dunkelblau 10%*/
  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 oben zuerst 3 mit angebot dann 8 (ohne angebot) Navigationspunkte ab 800px */
nav { width: 100%;}
#mainnav {
  width: 100%;
  display: block;
  vertical-align: top;
  height: 40px;
  background: transparent;
  border-top: 2px solid rgb(8,91,136);
  border-bottom: 2px solid rgb(8,91,136);/* das Blümchen Blau: rgb(8,91,136)*/;
  z-index: 5;
} 
/* 3 Navigationspunkte werden bis 800px breite eingeblendet ( angebot, special, und home danach 8 */
#mainnavbox li {
  position: relative;
  float: left;
  text-align: center;
  height: 40px;
  list-style-type: none;
  white-space: nowrap;}
li#mainnav1 {
  width: 16.6%;}
li#mainnav7 {
  width: 33.3%;}
li#mainnav6 {
  width: 49.8%;}
/*-----------------------------------------------------------------------*/
/* Styles für DropDown Menüs ab 800px Breite*/
#mainnavbox ul ul {
  position: absolute;
  padding: 0;
  min-width: 13em;
  background-color: white;
  background-color: rgba(255,255,255,0.8);
  -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: -80;
  top: -1000px;
 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: 40px;
  z-index: 30;
   font: inherit;}
#mainnavbox ul ul li {
	float: none;
	height: 35px;
	width: 100%;
	border-bottom: 1px solid rgb(8,91,136); /* das Blümchen Blau */}
#mainnavbox ul ul li:last-child {
	border: none;}
#mainnavbox ul ul li:hover {
	background-color: rgb(57,124,160); /* 80% Blümchenblau */
  background-color: rgba(8,91,136,0.8);
  transition: background 0.5s ease;}
/*-----------------------------------------------------------------*/

/* Angaben für kleinstes Display -480px: nur 3 Symbole +text */

li#mainnav2, li#mainnav3, li#mainnav4, li#mainnav5 {
  display: none;}
li#mainnav1, li#mainnav2, li#mainnav3, li#mainnav4, li#mainnav5, li#mainnav6, li#mainnav7 {
  background: transparent;
  transition: background 0.5s ease;
  text-align: center;
}
li#mainnav1:hover, li#mainnav2:hover, li#mainnav3:hover, li#mainnav4:hover, li#mainnav5:hover, li#mainnav6:hover, li#mainnav7:hover {
  background: rgb(33,107,148); /*fallbackfarbe 90% Blümchenblau*/
  background: rgba(8,91,136,0.9);
  /* Möglicher Verlauf oder Hintergrundfarbe
  background: -moz-linear-gradient(rgb(92,91,89), rgb(201,76,85)15%, rgb(187,31,42)70%, rgb(201,76,85)85%, rgb(133,132,131)98%);
  background: -webkit-linear-gradient(rgb(92,91,89), rgb(201,76,85)15%, rgb(187,31,42)70%, rgb(201,76,85)85%, rgb(133,132,131)98%);
  background: -ms-linear-gradient(rgb(92,91,89), rgb(201,76,85)15%, rgb(187,31,42)70%, rgb(201,76,85)85%, rgb(133,132,131)98%);
  background: -o-linear-gradient(rgb(92,91,89), rgb(201,76,85)15%, rgb(187,31,42)70%, rgb(201,76,85)85%, rgb(133,132,131)98%);
  background: linear-gradient(rgb(92,91,89), rgb(201,76,85)15%, rgb(187,31,42)70%, rgb(201,76,85)85%, rgb(133,132,131)98%); */}
#mainnav li h1 {
  font-size: 1.2em;
  vertical-align: middle;
  padding-top: 10px;
  padding-right: 2px;
  padding-bottom: 5px;
  font-weight: bold;
  color: rgb(38,50,96); /* dunkelblau 90% */
  transition: color 0.5s ease;}
#mainnav li h2 {
  font-size: 1em;
  vertical-align: middle;
  padding-top: 10px;
  padding-left: 1.5em;
  padding-right: 0.5em;
  padding-bottom: 5px;
  font-weight: bold;
  color: rgb(38,50,96); /* dunkelblau 90% */
  transition: color 0.5s ease;}
#mainnav li h1:hover, #mainnav li h2:hover {
  color: rgb(255,255,255); /* weiß */
  text-decoration: none;}
li#mainnav1[data-icon]::before {
  float: left;
  content: attr(data-icon) url('../images/menu_icons_bluemchen/home.png');
  position: relative;
  margin-left: 0.5em;
  margin-top: 3px;
  -moz-transform: scale(0.7);
  -o-transform: scale(0.7);
  -webkit-transform: scale(0.7);
  -ms-transform: scale(0.7);
  transform: scale(0.7);}
li#mainnav1[data-icon]:hover::before {
  content: attr(data-icon) url('../images/menu_icons_bluemchen/home_hover.png');}
/* mainnav 2, 3, 4, 5, 7 und 8 sind bis 800px ausgblendet; Angaben zur Einbindung der Icons: */
li#mainnav2[data-icon]::before {
  float: left;
  content: attr(data-icon) url('../images/menu_icons_bluemchen/blumen.png');
  position: relative;
  margin-left: 5px;
  margin-top: 3px;
  -moz-transform: scale(0.7);
  -o-transform: scale(0.7);
  -webkit-transform: scale(0.7);
  -ms-transform: scale(0.7);
  transform: scale(0.7);}
li#mainnav2[data-icon]:hover::before {
  content: attr(data-icon) url('../images/menu_icons_bluemchen/blumen_hover.png');}
li#mainnav3[data-icon]::before {
  float: left;
  content: attr(data-icon) url('../images/menu_icons_bluemchen/floristik.png');
  position: relative;
  margin-left: 5px;
  margin-top: 3px;
  -moz-transform: scale(0.7);
  -o-transform: scale(0.7);
  -webkit-transform: scale(0.7);
  -ms-transform: scale(0.7);
  transform: scale(0.7);}
li#mainnav3[data-icon]:hover::before {
  content: attr(data-icon) url('../images/menu_icons_bluemchen/floristik_hover.png');}
li#mainnav4[data-icon]::before {
  float: left;
  content: attr(data-icon) url('../images/menu_icons_bluemchen/accessoires.png');
  position: relative;
  margin-left: 5px;
  margin-top: 3px;
  -moz-transform: scale(0.7);
  -o-transform: scale(0.7);
  -webkit-transform: scale(0.7);
  -ms-transform: scale(0.7);
  transform: scale(0.7);}
li#mainnav4[data-icon]:hover::before {
  content: attr(data-icon) url('../images/menu_icons_bluemchen/accessoires_hover.png');}
li#mainnav5[data-icon]::before {
  float: left;
  content: attr(data-icon) url('../images/menu_icons_bluemchen/candle2.png');
  position: relative;
  margin-left: 5px;
  margin-top: 3px;
  -moz-transform: scale(0.7);
  -o-transform: scale(0.7);
  -webkit-transform: scale(0.7);
  -ms-transform: scale(0.7);
  transform: scale(0.7);}
li#mainnav5[data-icon]:hover::before {
  content: attr(data-icon) url('../images/menu_icons_bluemchen/candle_hover2.png');}
li#mainnav6[data-icon]::before {
  float: left;
  content: attr(data-icon) url('../images/menu_icons_bluemchen/shop.png');
  position: relative;
  margin-left: 20%;
  margin-top: 3px;
  -moz-transform: scale(0.7);
  -o-transform: scale(0.7);
  -webkit-transform: scale(0.7);
  -ms-transform: scale(0.7);
  transform: scale(0.7);}
li#mainnav6[data-icon]:hover::before {
  content: attr(data-icon) url('../images/menu_icons_bluemchen/shop_hover.png');}
li#mainnav7[data-icon]::before {
  float: left;
  content: attr(data-icon) url('../images/menu_icons_bluemchen/angebot.png');
  position: relative;
  margin-left: 0.5em;
  margin-top: 3px;
  -moz-transform: scale(0.7);
  -o-transform: scale(0.7);
  -webkit-transform: scale(0.7);
  -ms-transform: scale(0.7);
  transform: scale(0.7);}
li#mainnav7[data-icon]:hover::before {
  content: attr(data-icon) url('../images/menu_icons_bluemchen/angebot_hover.png');}
/* ---Styles für responsive Navigation zum Einblenden bis 800px----------*/
#angebot {
  position: absolute;
  width: 200px;
  top: 16em;
  right: 2%;
  background-color: rgb(255,255,255); /*weiss 80%*/
  background-color: rgba(255,255,255,0.8);
  -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: 20;
  visibility: hidden;
  opacity: 0;
  -moz-transition: all 1s ease 0.5s;
  -webkit-transition: all 1s ease 0.5s;
  -o-transition: all 1s ease 0.5s;
  -ms-transition: all 1s ease 0.5s;
  transition: all 1s ease 0.5s;}
#angebot:target, #angebot:link, #angebot:hover  {
  width: 80%;
  max-width: 210px;
  visibility: visible;
  opacity: 1; }
/* ---Styles für responsive Navigation zum Einblenden bis 800px----------
#angebot {
  position: absolute;
  width: 200px;
  top: 14em;
  left: -250px;
  -moz-transition: transform 1s ease 0.5s;
  -webkit-transition: transform 1s ease 0.5s;
  -o-transition: transform 1s ease 0.5s;
  -ms-transition: transform 1s ease 0.5s;
  transition: transform 1s ease 0.5s;
  background-color: rgb(255,255,255); /*weiss 30%
  background-color: rgba(255,255,255,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: 20;}
#angebot:target, #angebot:link, #angebot:hover  {
  width: 80%;
  max-width: 210px;
  -moz-transform: translatex(300px);
  -webkit-transform: translatex(300px);
  -o-transform: translatex(300px);
  -ms-transform: translatex(300px);
  transform: translatex(300px);}*/
#leftbox {
  width: 100%;
  position: relative;}
.leftinside {
  text-align: left;
  padding: 2px;}
/*--------------------------------------------------------------------*/
/*--------------------------------------------------------------------*/
/* Deklarationen und Styles für Responsive Navigation die bis 800px eingeblendet wird */
#subnav {
  width: 98%;}
#subnav ul {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  min-height: 35px;}
#subnav ul li:hover, #subnav ul li:focus, #subnav ul li:target {
  background-color: rgb(57,124,160); /*80% Fallbackfarbe */
  background-color: rgba(8,91,136,0.8);
  transition: background-color: 0.5s ease;}
#subnav ul li#title:hover, #subnav ul li#title:focus, #subnav ul li#title:target {
  text-decoration: none;
  background: transparent;
}
#subnav ul li h1 {
  padding-top: 9px;
  font-size: 1.3em; /* 13px*/ 
  font-weight: bold;
  color: rgb(14,27,78); /* dunkelblau */}
#subnav ul li h2 {
  padding-top: 9px;
  font-size: 1.2em; /* 13px*/ 
  font-weight: bold;
  color: rgb(14,27,78); /* dunkelblau */
  transition: color 0.5s ease;}
#subnav ul li h3 {
  color: rgb(14,27,78); /* dunkelblau */
  padding-top: 10px;
  padding-bottom: 8px;
  padding-left: 3em;
  font-size: 1.1em;
  font-weight: bold;
  line-height: 1.2em;
  transition: color 0.5s ease;}
#subnav ul li h2:hover, #subnav ul li h3:hover {
  color: rgb(255,255,255);/*weiß*/}
#subnav ul li {
  border-bottom: 1px solid rgb(62,73,113); /*dunkelblau 80%*/
  height: 35px;
  position: relative;}
#subnav ul li#subagb {
  border: none;}
/* Einbindung der einzelnen Icons für die Navigationspunkte der responsive Subnavigation */
li#subblumen[data-icon]::before {
  content: attr(data-icon) url('../images/menu_icons_bluemchen/blumen.png');
  margin-right: 1px;
  margin-left: 1px;
  position: relative;
  float: left;
  margin-top: 6px;}
li#subblumen[data-icon]:hover::before {
  content: attr(data-icon) url('../images/menu_icons_bluemchen/blumen_hover.png');}
li#subfloristik[data-icon]::before {
  content: attr(data-icon) url('../images/menu_icons_bluemchen/floristik.png');
  margin-right: 1px;
  margin-left: 1px;
  position: relative;
  float: left;
  margin-top: 6px;}
li#subfloristik[data-icon]:hover::before {
  content: attr(data-icon) url('../images/menu_icons_bluemchen/floristik_hover.png');}
li#subaccessoires[data-icon]::before {
  content: attr(data-icon) url('../images/menu_icons_bluemchen/accessoires.png');
  margin-right: 1px;
  margin-left: 1px;
  position: relative;
  float: left;
  margin-top: 6px;}
li#subaccessoires[data-icon]:hover::before {
  content: attr(data-icon) url('../images/menu_icons_bluemchen/accessoires_hover.png');}
li#subcandle[data-icon]::before {
  content: attr(data-icon) url('../images/menu_icons_bluemchen/candle2.png');
  margin-right: 1px;
  margin-left: 1px;
  position: relative;
  float: left;
  margin-top: 6px;}
li#subcandle[data-icon]:hover::before {
  content: attr(data-icon) url('../images/menu_icons_bluemchen/candle_hover2.png');}
li#subkontakt[data-icon]::before {
  content: attr(data-icon) url('../images/menu_icons_bluemchen/kontakt.png');
  margin-right: 1px;
  margin-left: 1px;
  position: relative;
  float: left;
  margin-top: 6px;}
li#subkontakt[data-icon]:hover::before {
  content: attr(data-icon) url('../images/menu_icons_bluemchen/kontakt_hover.png');}
li#subimpressum[data-icon]::before {
  content: attr(data-icon) url('../images/menu_icons_bluemchen/impressum.png');
  margin-right: 1px;
  margin-left: 1px;
  position: relative;
  float: left;
  margin-top: 6px;}
li#subimpressum[data-icon]:hover::before {
  content: attr(data-icon) url('../images/menu_icons_bluemchen/impressum_hover.png');}
li#subagb[data-icon]::before {
  content: attr(data-icon) url('../images/menu_icons_bluemchen/agb.png');
  margin-right: 1px;
  margin-left: 1px;
  position: relative;
  float: left;
  margin-top: 6px;}
li#subagb[data-icon]:hover::before {
  content: attr(data-icon) url('../images/menu_icons_bluemchen/agb_hover.png');}
li#subblumen[data-icon]::before, li#subfloristik[data-icon]::before, li#subcandle[data-icon]::before, li#subkontakt::before, li#subimpressum::before, li#subagb[data-icon]::before {
  -moz-transform: scale(0.6);
  -o-transform: scale(0.6);
  -webkit-transform: scale(0.6);
  -ms-transform: scale(0.6);
  transform: scale(0.6);}
/*--------------------------------------------------------------------*/
/*--------------------------------------------------------------------*/
/* Bild-Animationsbox unterhalb der Navigation ab 600px */
#headboxbottom {
  float: none;
  clear: both;
  text-align: center;
  vertical-align: top;
  width: 100%;
  max-width: 1200px;
  padding: 0px;
  margin: 0px auto;
  display: none;}
/*--------------------------------------------------------------------*/
/* Hauptinhaltsboxen */
/* Hauptinhaltsbox */
#maincontent {
  width: 100%;
  max-width: 1200px; /* bleibt immer durch bis 1200px */
  clear: both;
  min-height: 12em;
  margin-top: 0.5em;}
/* container für Bilder */
#mainleft {
  width: 100%;
  max-width: 470px;
  margin-bottom: 2.5em;} 
/* Box mit Border in mainleft*/  
#mainleftbox {
  width: 98%;
  margin-left: 1%;
  margin-right: 0;
  /*overflow: hidden;*/}
/* container für Text */     
#main {
  width: 100%;
  max-width: 470px;
  margin-bottom: 0.5em;} 
/* Box mit Border in main*/  
#mainbox {
  width: 98%;
  min-height: 45em;
  margin-left: 1%;
  margin-right: 0;
  border: 1px solid rgba(255,255,255,0.5);
  /*overflow: hidden;*/}
/* container für Diabox */  
#mainright {
  width: 100%;
  max-width: 470px;
  margin-bottom: 0.5em;}
/* Box mit Border in mainright*/  
#mainrightbox {
  width: 98%;
  margin-left: 1%;
  margin-right: 0;}
/*Boxen im Inneren */
.maininside {
  /* Schriftgröße in Relation zu den 14px des Contents -> Vererbung!! */
  font-size: 1em; /* 10.4px */
  text-align: justify; /* blocksatz*/
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  -o-hyphens: auto;
  -ms-hyphens: auto; /*silbentrennung*/
  hyphens: auto;
  min-height: 8em;
  line-height: 1.2em;
  text-align: left;
  padding: 5px;}
  
/* Inhalte in Hauptinhaltsboxen mit Basisangaben */
.maininside a:link, .maininside a:visited, .maininside a:active {
   color: rgb(14,27,78); /*dunkelblau */
   text-decoration: none;}
.maininside a:hover, .maininside a:focus, .maininside a:target {
   color: white; 
   text-decoration: none;}
.maininside em a:hover {
  color: white;
  text-decoration: none;}
.maininside ul {
  line-height: 0.8em;} 
.maininside ul ul {
  line-height: 0.8em;}   
.maininside ul li {
  width: 96%;
  margin-left: 2%; 
  text-align: left;
  list-style: none;
  line-height: 1.1em;
  font-weight: normal;
  padding: 0;}
.maininside ul li ul li {
  width: 96%;
  margin-left: 2%; 
  text-align: left;
  list-style: none;
  line-height: 1.1em;
  font-weight: normal;
  padding: 0;}
/*--------------------------------------------------------------------*/
/* Boxen in Containern */
/* Box für Dishow alleine */
.maindiabox {
  width: 40%;
  max-width: 180px; /* gemessen an max-width größe von mainrightbox 98% von 470-->460 und etwas kleiner-->450px */
  margin-left: 30%;
  margin-bottom: 2em;}
/* box für diashow die nebeneinander dann übereinander  steht ab 800px*/
.maindiaboxsmall {
  width: 40%;
  max-width: 180px; /* gemessen an max-widt größe von mainrightbox-->450px*/
  float: left;
  margin-left: 6.5%;
  margin-bottom: 2em;}
/* box für statische bild die neben/unter diashow (maindiaboxsmall) steht) */
.maindiaboxsmallbild {
  width: 40%;
  max-width: 180px; /* gemessen an max-widt größe von mainrightbox-->450px*/
  float: left;
  margin-left: 6.5%;
  margin-bottom: 2em;}
/* box für 2 Bilder in mainrightbox 470--> 2 Bilder neben- und dann untereinander Statisch*/
.maindiaboxtwo {
  width: 40%;
  max-width: 180px; /* gemessen an max-widt größe von mainrightbox-->450px*/
  float: left;
  margin-left: 6.5%;
  margin-bottom: 2em;
  margin-top: 2%;}
  /* box für Bilder in mainleftbox 450--> 3 Bilder nebeneinander*/
.bildmain {
  width: 25%;
  max-width: 112px; /* gemessen an max-width größe von mainleftbox-->450px */
  text-align: center;
  float: left;
  margin-left: 6.5%;}
/*--------------------------------------------------------------------*/
/* ---Styles für Footer mit 3 Boxen Listen: Kontakt und Infos+Socialamedia----------*/
#foot {
  width: 100%;
  clear: both;
  float: none;
  vertical-align: top;
  min-height: 30em;
  font-size: 0.9em;
  word-spacing: 0.2em;
  vertical-align: middle;
  text-align: center;
  padding-top: 4px;
  border-top: 2px solid rgb(8,91,136);
  margin-top: 0.5em;
  text-align: center;}
#footbox {
  width: 98%;
  margin-left: 1%;
  padding-top: 0.6em;
  vertical-align: top;
  min-height: 5em;
  color: rgb(14,27,78); /* dunkelblau */
  transition: color 0.5s ease;}
#footbox ul {
  list-style-type: none;
  text-decoration: none;
  text-align: left;
  margin-top: 0.5em;}
#footbox ul li {
  min-height: 3.5em;}
#footbox a:link, #footbox a:visited, #footbox a:active {
  text-decoration: none;
  color: rgb(14,27,78) /*dunkelblau */}
#footbox a:hover {
  text-decoration: none;
  color: rgb(255,255,255); /*white*/}
#footbox h1, #footbox h2, #footbox h3, #footbox h4, #footbox h5, #footbox h6 {
  font-style: normal;
  color: rgb(14,27,78); /*dunkelblau*/
  transition: color 0.5s ease;}
#footbox h1 {font-size: 1.4em;}
#footbox h2 {font-size: 1.3em;}
#footbox h3 {font-size: 1.2em;}
#footbox h4 {font-size: 1.1em;}
#footbox h5 {font-size: 1em;}
#footbox h6 {font-size: 0.8em;}
#footbox h1:link, #footbox h1:visited, #footbox h1:active, #footbox h2:link, #footbox h2:visited, #footbox h2:active, #footbox h3:link, #footbox h3:visited, #footbox h3:active, #footbox h4:link, #footbox h4:visited, #footbox h4:active, #footbox h5:link, #footbox h5:visited, #footbox h5:active, #footbox h6:link, #footbox h6:visited, #footbox h6:active {
  color: rgb(14,27,78); /*dunkelblau*/}
#footbox a h1:hover, #footbox a h2:hover, #footbox a h3:hover , #footbox a h4:hover, #footbox a h5:hover, #footbox a h6:hover {
  color: rgb(255,255,255); /*white*/}
/* Positionierung Inhalt Footer */
#footbox1, #footbox2, #footbox3 {
  width: 90%;
  min-height: 15em;
  border: 1px solid rgb(14,27,78); /* fallback */
  border: 1px solid rgba(14,27,78,0.9);
  margin-left: 3.5%;
  text-align: left;
  padding: 0.5em;
  margin-top: 0.5em;
  margin-bottom: 5px;
  white-space: nowrap;}
#footbox3 em {
font-size: 1em;
font-weight: bold;
}

#foottext {
  margin-bottom: 0.5em;
  width: 100%;
  clear: both;
  float: left;
  border-top: 1px solid rgba(14,27,78); /* fallback */
  border-top: 1px solid rgba(14,27,78,0.9);
  padding-top: 5px;
  text-align: right;}
#footbox small {
  font-family: Helvetica, Myriad, Arial, sans-serif;
  font-size: 0.95em; /* gemmessen an content ---> 9.88px */
  font-style: normal;
  color: rgb(14,27,78); /*dunkelblau 10%*/}
/* Einbindung der Icons für Footboxen */
/*footbox 1: Kontakt*/
/*footbox 2: Informationen */
#footbox2 ul {
  margin-top: 0.5em;}
li#footkontakt[data-icon]::before {
  content: attr(data-icon) url('../images/menu_icons_bluemchen/kontakt_blue.png');}
li#footkontakt[data-icon]:hover::before {
  content: attr(data-icon) url('../images/menu_icons_bluemchen/kontakt_hover.png');}
li#footimpressum[data-icon]::before {
  content: attr(data-icon) url('../images/menu_icons_bluemchen/impressum_blue.png');}
li#footimpressum[data-icon]:hover::before {
  content: attr(data-icon) url('../images/menu_icons_bluemchen/impressum_hover.png');}
li#footagb[data-icon]::before {
  content: attr(data-icon) url('../images/menu_icons_bluemchen/agb_blue.png');}
li#footagb[data-icon]:hover::before {
  content: attr(data-icon) url('../images/menu_icons_bluemchen/agb_hover.png');} 
li#footsitemap[data-icon]::before {
  content: attr(data-icon) url('../images/menu_icons_bluemchen/sitemap_blue.png');}
li#footsitemap[data-icon]:hover::before {
  content: attr(data-icon) url('../images/menu_icons_bluemchen/sitemap_hover.png');}  
li#footkontakt[data-icon]::before, li#footimpressum[data-icon]::before, li#footagb[data-icon]::before, li#footsitemap[data-icon]::before {
  margin-right: 1px;
  margin-left: 0.5em;
  position: relative;
  float: left;
  margin-top: -0.8em;
  -moz-transform: scale(0.6);
  -o-transform: scale(0.6);
  -webkit-transform: scale(0.6);
  -ms-transform: scale(0.6);
  transform: scale(0.6);}
li#footfacebook {
  margin-left: 0.5em;
}  
/*--------------------------------------------------------------------*/
/*--------------------------------------------------------------------*/
/* Styles für Text */
h1, h2, h3, h4, h5, h6 {
  font-family: Arial, Trebuchet, Verdana, sans-serif;
  font-weight: bold; color: rgb(14,27,78); /* dunkelblau*/
  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(14,27,78); /* dunkelblau*/}
h1 a:hover {color: white;}
h2 {font-size: 1.35em; /* 13,5px */
  line-height: 1.2em;}
h2 a:link, h2 a:visited, h2 a:active {color: rgb(14,27,78); /* dunkelblau*/}
h2 a:hover {color: white;}
h3 {font-size: 1.3em; /* 13px */line-height: 1.2em;}
h3 a:link, h3 a:visited, h3 a:active {color: rgb(14,27,78); /* dunkelblau*/}
h3 a:hover {color: white;}
a h3:link, a h3:visited, a h3:active {color: rgb(14,27,78); /* dunkelblau*/}
a h3:hover {color: white;}
h4 {font-size: 1.2em; /* 12,48px */
  line-height: 1.2em;}
h4 a:link, h4 a:visited, h4 a:active {color: rgb(14,27,78); /* dunkelblau*/}
h4 a:hover {color: white;}
a h4:link, a h4:visited, a h4:active {color: rgb(14,27,78); /* dunkelblau*/}
a h4:hover {color: white;}
h5 {font-size: 1.1em; /* 12px */
  line-height: 1.2em;}
h5 a:link, h5 a:visited, h5 a:active {color: rgb(14,27,78); /* dunkelblau*/}
h5 a:hover {color: white;}
a h5:link, a h5:visited, a h5:active {color: rgb(14,27,78); /* dunkelblau*/}
a h5:hover {color: white;}
h6 {font-size: 1em; /* 11px */
  line-height: 1em;
  color: rgb(14,27,78);}
h6 a:link, h6 a:visited, h6 a:active {color: rgb(14,27,78); /* dunkelblau*/}
h6 a:hover {color: white;}
a h6:link, a h6:visited, a h6:active {color: rgb(14,27,78); /* dunkelblau*/}
a h6:hover {color: white;}
small {
  font-family: Arial, Trebuchet, Verdana, sans-serif;
  font-size: 0.9em; /* 11px */
  font-style: normal;
  font-weight: normal;
  color: rgb(14,27,78); /* dunkelblau*/
  padding: 0; margin: 0; text-align: center;}
small a:link, small a:active, small a:visited {
  color: rgb(14,27,78); /* dunkelblau*/text-decoration: none;}
small a:hover {
  color: white; text-decoration: none;}
em {font-style: normal;
  color: rgb(14,27,78); /* dunkelblau*/font-weight: bold;}
em a:link, em a:active, em a:visited {
  color: rgb(14,27,78); /* dunkelblau*/text-decoration: none;}
em a:hover {color: white;
  text-decoration: none;}
a em:link, a em:active, a em:visited {color: rgb(14,27,78); /* dunkelblau*/
  text-decoration: none;}
a em:hover {color: rgb(62,73,113); /* dunkelblau*/text-decoration: none;}
strong {color: white; font-weight: bold;}
strong a:link, strong a:active, strong a:visited {color: rgb(149,191,57); /*hellgrün */text-decoration: none;}
strong a:hover {color: rgb(14,27,78); /* dunkelblau*/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;}
#mainbox h2 {
  color: white;
}
/*--------------------------------------------------------------------*/
/*--------------------------------------------------------------------*/
/* Sonstige diverse Styles */
iframe {
  min-width: 100px;
  min-height: 100px;
  width: 100%;
  max-width: 180px;
  max-height: 180px;} 
/*---------------------------------------------------------------*/
/* Allgemein alle Bilder rechts */
/* Styles für Bildunterschriften Bilder mainleftinside und mainrightinside*/
.bildmain {
  position: relative;
  overflow: hidden;}
.bildmain figure {
  position: relative;
  margin: 0;}
.bildmain figcaption {
  position: absolute;
  color: rgb(62,73,113); /* dnklblau 90% */
  text-align: left;
  font-size: 0.9em;
  font-weight: bold;
  padding: 2px;
  width: 100%;
  min-height: 2em;
  bottom: -2em;
  z-index: -100;
  visibility: hidden;
  background: rgb(255,255,255);
  background: rgba(255,255,255,0.9);
  transition: 1s ease-in;
  -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;}
.bildmain:hover figcaption, .bildmain:focus figcaption, .bildmain:target figcaption {
  bottom: 0;
  z-index: auto;
  visibility: visible;}
/*-----------------------------------------------------------*/
/* grosse Bilder in maindrightinside */
.maindiaboxtwo {
  position: relative;
  overflow: hidden;}    
.maindiaboxtwo figure {
  position: relative;
  margin: 0;}
.maindiaboxtwo figcaption {
  position: absolute;
  color: rgb(62,73,113); /* dnklblau 90% */
  text-align: left;
  font-size: 0.9em;
  font-weight: bold;
  padding: 2px;
  width: 100%;
  min-height: 2em;
  bottom: -2em;
  z-index: -100;
  visibility: hidden;
  background: rgb(255,255,255);
  background: rgba(255,255,255,0.9);
  transition: 1s ease-in;
  -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;}
.maindiaboxtwo:hover figcaption, .maindiaboxtwo:focus figcaption, .maindiaboxtwo:target figcaption {
  bottom: 0;
  z-index: auto;
  visibility: visible;}
/*-----------------------------------------------------------*/
.maindiaboxsmallbild {
  position: relative;
  overflow: hidden;}    
.maindiaboxsmallbild figure {
  position: relative;
  margin: 0;}
.maindiaboxsmallbild figcaption {
  position: absolute;
  color: rgb(62,73,113); /* dnklblau 90% */
  text-align: left;
  font-size: 0.9em;
  font-weight: bold;
  padding: 2px;
  width: 100%;
  min-height: 2em;
  bottom: -2em;
  z-index: -100;
  visibility: hidden;
  background: rgb(255,255,255);
  background: rgba(255,255,255,0.9);
  transition: 1s ease-in;
  -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;}
.maindiaboxsmallbild:hover figcaption, .maindiaboxsmallbild:focus figcaption, .maindiaboxsmallbild:target figcaption {
  bottom: 0;
  z-index: auto;
  visibility: visible;}
/*-----------------------------------------------------------*/
/* ---------STYLES UND INHALTE DER EINZELNEN DIABOXEN + BILDBESCHREIBUNG */
/* Styles Animation Bildbeschreibung "Fade-animation 20 Bilder" */
.bilderfade20 {
  position: relative;
  min-height: 19em;
  width: 100%;
  margin: 0;
  overflow: hidden;}
.bilderfade20 figure {
  position: absolute;
  top: 0; left: 0;
  -moz-opacity: 0;
  -webkit-opacity: 0;
  -o-opacity: 0;
  -ms-opacity: 0;
  opacity: 0;
  width: 100%;
  margin: 0;}
.bilderfade20 figcaption {
  position: relative;
  color: rgb(62,73,113); /* dnklblau 90% */
  text-align: left;
  font-size: 0.9em;
  font-weight: bold;
  padding: 2px;
  min-height: 2em;
  bottom: 0;
  visibility: hidden;
  background: rgb(255,255,255);
  background: rgba(255,255,255,0.8);
  transition: 1s ease-in;
  -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;}
.bilderfade20:hover figcaption, .bilderfade20:target figcaption, .bilderfade20:focus figcaption {
  bottom: 3em;
  z-index: auto;
  visibility: visible;}
/* Styles für Diashow Bilderfader für 20 Bilder a 6 sec. --> 120sec Gesamtdauer */
/* Fallback-Bild */
.bilderfade20 figure:nth-of-type(1) {
  -moz-opacity: 1;
  -webkit-opacity: 1;
  -o-opacity: 1;
  -ms-opacity: 1;
  opacity: 1;}
.bilderfade20 figure:nth-of-type(1) {
  -moz-animation: fadetwenty 120s ease-in-out infinite; 
  -webkit-animation: fadetwenty 120s ease-in-out infinite; 
  -ms-animation: fadetwenty 120s ease-in-out infinite; 
  -o-animation: fadetwenty 120s ease-in-out infinite; 
  animation: fadetwenty 120s ease-in-out infinite;}
.bilderfade20 figure:nth-of-type(2) {
  -moz-animation: fadetwenty 120s 6s ease-in-out infinite;
  -webkit-animation: fadetwenty 120s 6s ease-in-out infinite; 
  -ms-animation: fadetwenty 120s 6s ease-in-out infinite;
  -o-animation: fadetwenty 120s 6s ease-in-out infinite; 
  animation: fadetwenty 120s 6s ease-in-out infinite;}
.bilderfade20 figure:nth-of-type(3) {
  -moz-animation: fadetwenty 120s 12s ease-in-out infinite;
  -webkit-animation: fadetwenty 120s 12s ease-in-out infinite; 
  -ms-animation: fadetwenty 120s 12s ease-in-out infinite;
  -o-animation: fadetwenty 120s 12s ease-in-out infinite; 
  animation: fadetwenty 120s 12s ease-in-out infinite;}
.bilderfade20 figure:nth-of-type(4) {
  -moz-animation: fadetwenty 120s 18s ease-in-out infinite;
  -webkit-animation: fadetwenty 120s 18s ease-in-out infinite; 
  -ms-animation: fadetwenty 120s 18s ease-in-out infinite;
  -o-animation: fadetwenty 120s 18s ease-in-out infinite; 
  animation: fadetwenty 120s 18s ease-in-out infinite;}
.bilderfade20 figure:nth-of-type(5) {
  -moz-animation: fadetwenty 120s 24s ease-in-out infinite;
  -webkit-animation: fadetwenty 120s 90s 24s ease-in-out infinite; 
  -ms-animation: fadetwenty 120s 24s ease-in-out infinite;
  -o-animation: fadetwenty 120s 24s ease-in-out infinite; 
  animation: fadetwenty 120s 24s ease-in-out infinite;}
.bilderfade20 figure:nth-of-type(6) {
  -moz-animation: fadetwenty 120s 30s ease-in-out infinite;
  -webkit-animation: fadetwenty 120s 30s ease-in-out infinite; 
  -ms-animation: fadetwenty 120s 30s ease-in-out infinite;
  -o-animation: fadetwenty 120s 30s ease-in-out infinite; 
  animation: fadetwenty 120s 30s ease-in-out infinite;}
.bilderfade20 figure:nth-of-type(7) {
  -moz-animation: fadetwenty 120s 36s ease-in-out infinite;
  -webkit-animation: fadetwenty 120s 36s ease-in-out infinite; 
  -ms-animation: fadetwenty 120s 36s ease-in-out infinite;
  -o-animation: fadetwenty 120s 36s ease-in-out infinite; 
  animation: fadetwenty 120s 36s ease-in-out infinite;}
.bilderfade20 figure:nth-of-type(8) {
  -moz-animation: fadetwenty 120s 42s ease-in-out infinite;
  -webkit-animation: fadetwenty 120s 42s ease-in-out infinite; 
  -ms-animation: fadetwenty 120s 42s ease-in-out infinite;
  -o-animation: fadetwenty 120s 42s ease-in-out infinite; 
  animation: fadetwenty 120s 42s ease-in-out infinite;}
.bilderfade20 figure:nth-of-type(9) {
  -moz-animation: fadetwenty 120s 48s ease-in-out infinite;
  -webkit-animation: fadetwenty 120s 48s ease-in-out infinite; 
  -ms-animation: fadetwenty 120s 48s ease-in-out infinite;
  -o-animation: fadetwenty 120s 48s ease-in-out infinite; 
  animation: fadetwenty 120s 48s ease-in-out infinite;}
.bilderfade20 figure:nth-of-type(10) {
  -moz-animation: fadetwenty 120s 54s ease-in-out infinite;
  -webkit-animation: fadetwenty 120s 54s ease-in-out infinite; 
  -ms-animation: fadetwenty 120s 54s ease-in-out infinite;
  -o-animation: fadetwenty 120s 54s ease-in-out infinite; 
  animation: fadetwenty 120s 54s ease-in-out infinite;}
.bilderfade20 figure:nth-of-type(11) {
  -moz-animation: fadetwenty 120s 60s ease-in-out infinite;
  -webkit-animation: fadetwenty 120s 60s ease-in-out infinite; 
  -ms-animation: fadetwenty 120s 60s ease-in-out infinite;
  -o-animation: fadetwenty 120s 60s ease-in-out infinite; 
  animation: fadetwenty 120s 60s ease-in-out infinite;}
.bilderfade20 figure:nth-of-type(12) {
  -moz-animation: fadetwenty 120s 66s ease-in-out infinite;
  -webkit-animation: fadetwenty 120s 66s ease-in-out infinite; 
  -ms-animation: fadetwenty 120s 66s ease-in-out infinite;
  -o-animation: fadetwenty 120s 66s ease-in-out infinite; 
  animation: fadetwenty 120s 66s ease-in-out infinite;}
.bilderfade20 figure:nth-of-type(13) {
  -moz-animation: fadetwenty 120s 72s ease-in-out infinite;
  -webkit-animation: fadetwenty 120s 72s ease-in-out infinite; 
  -ms-animation: fadetwenty 120s 72s ease-in-out infinite;
  -o-animation: fadetwenty 120s 72s ease-in-out infinite; 
  animation: fadetwenty 120s 72s ease-in-out infinite;}
.bilderfade20 figure:nth-of-type(14) {
  -moz-animation: fadetwenty 120s 78s ease-in-out infinite;
  -webkit-animation: fadetwenty 120s 78s ease-in-out infinite; 
  -ms-animation: fadetwenty 120s 78s ease-in-out infinite;
  -o-animation: fadetwenty 120s 78s ease-in-out infinite; 
  animation: fadetwenty 120s 78s ease-in-out infinite;}
.bilderfade20 figure:nth-of-type(15) {
  -moz-animation: fadetwenty 120s 84s ease-in-out infinite;
  -webkit-animation: fadetwenty 120s 84s ease-in-out infinite; 
  -ms-animation: fadetwenty 120s 84s ease-in-out infinite;
  -o-animation: fadetwenty 120s 84s ease-in-out infinite; 
  animation: fadetwenty 120s 84s ease-in-out infinite;}
.bilderfade20 figure:nth-of-type(16) {
  -moz-animation: fadetwenty 120s 90s ease-in-out infinite;
  -webkit-animation: fadetwenty 120s 90s ease-in-out infinite; 
  -ms-animation: fadetwenty 120s 90s ease-in-out infinite;
  -o-animation: fadetwenty 120s 90s ease-in-out infinite; 
  animation: fadetwenty 120s 90s ease-in-out infinite;}
.bilderfade20 figure:nth-of-type(17) {
  -moz-animation: fadetwenty 120s 96s ease-in-out infinite;
  -webkit-animation: fadetwenty 120s 96s ease-in-out infinite; 
  -ms-animation: fadetwenty 120s 96s ease-in-out infinite;
  -o-animation: fadetwenty 120s 96s ease-in-out infinite; 
  animation: fadetwenty 120s 96s ease-in-out infinite;}
.bilderfade20 figure:nth-of-type(18) {
  -moz-animation: fadetwenty 120s 102s ease-in-out infinite;
  -webkit-animation: fadetwenty 120s 102s ease-in-out infinite; 
  -ms-animation: fadetwenty 120s 102s ease-in-out infinite;
  -o-animation: fadetwenty 120s 102s ease-in-out infinite; 
  animation: fadetwenty 120s 102s ease-in-out infinite;}
.bilderfade20 figure:nth-of-type(19) {
  -moz-animation: fadetwenty 120s 108s ease-in-out infinite;
  -webkit-animation: fadetwenty 120s 108s ease-in-out infinite; 
  -ms-animation: fadetwenty 120s 108s ease-in-out infinite;
  -o-animation: fadetwenty 120s 108s ease-in-out infinite; 
  animation: fadetwenty 120s 108s ease-in-out infinite;}
.bilderfade20 figure:nth-of-type(20) {
  -moz-animation: fadetwenty 120s 114s ease-in-out infinite;
  -webkit-animation: fadetwenty 120s 114s ease-in-out infinite; 
  -ms-animation: fadetwenty 120s 114s ease-in-out infinite;
  -o-animation: fadetwenty 120s 114s ease-in-out infinite; 
  animation: fadetwenty 120s 114s ease-in-out infinite;}
/* Einblendung Überblendung 20 Bilder*/
@-moz-keyframes fadetwenty {
  1.66%, 5% {opacity: 1;}
  0%, 6.66%, 100% {opacity: 0;}}
@-webkit-keyframes fadetwenty {
  1.66%, 5% {opacity: 1;}
  0%, 6.66%, 100% {opacity: 0;}}
@-ms-keyframes fadetwenty {
  1.66%, 5% {opacity: 1;}
  0%, 6.66%, 100% {opacity: 0;}}
@-o-keyframes fadetwenty {
  1.66%, 5% {opacity: 1;}
  0%, 6.66%, 100% {opacity: 0;}}
@keyframes fadetwenty {
  1.66%, 5% {opacity: 1;}
  0%, 6.66%, 100% {opacity: 0;}}
.bilderfade20:hover figure, .bilderfade20:focus figure, .bilderfade20:target figure {
  -moz-animation-play-state: paused;
  -webkit-animation-play-state: paused;
  -ms-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;} 
/*---------------------------------------------------------------*/
/* Styles Animation Bildbeschreibung "Fade-animation 15 Bilder" --> für alle Diaboxen mit fade 15 Bilder*/
.bilderfade15 {
  position: relative;
  min-height: 19em;
  width: 100%;
  margin: 0;
  overflow: hidden;}
.bilderfade15 figure {
  position: absolute;
  top: 0; left: 0;
  -moz-opacity: 0;
  -webkit-opacity: 0;
  -o-opacity: 0;
  -ms-opacity: 0;
  opacity: 0;
  width: 100%;
  margin: 0;}
.bilderfade15 figcaption {
  position: relative;
  color: rgb(62,73,113); /* dnklblau 90% */
  text-align: left;
  font-size: 0.9em;
  font-weight: bold;
  padding: 2px;
  min-height: 2em;
  bottom: 0;
  z-index: -100;
  visibility: hidden;
  background: rgb(255,255,255);
  background: rgba(255,255,255,0.8);
  transition: 1s ease-in;
  -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;}
.bilderfade15:hover figcaption, .bilderfade15:target figcaption, .bilderfade15:focus figcaption {
  bottom: 3em;
  z-index: auto;
  visibility: visible;}
/* Styles für Diashow Seite logodesign 15 Bilder a 6 sec. */
/* Fallback-Bild */
.bilderfade15 figure:nth-of-type(1) {
  -moz-opacity: 1;
  -webkit-opacity: 1;
  -o-opacity: 1;
  -ms-opacity: 1;
  opacity: 1;}
.bilderfade15 figure:nth-of-type(1) {
  -moz-animation: fadefifteen 90s ease-in-out infinite; 
  -webkit-animation: fadefifteen 90s ease-in-out infinite; 
  -ms-animation: fadefifteen 90s ease-in-out infinite; 
  -o-animation: fadefifteen 90s ease-in-out infinite; 
  animation: fadefifteen 90s ease-in-out infinite; }
.bilderfade15 figure:nth-of-type(2) {
  -moz-animation: fadefifteen 90s 6s ease-in-out infinite;
  -webkit-animation: fadefifteen 90s 6s ease-in-out infinite; 
  -ms-animation: fadefifteen 90s 6s ease-in-out infinite;
  -o-animation: fadefifteen 90s 6s ease-in-out infinite; 
  animation: fadefifteen 90s 6s ease-in-out infinite;}
.bilderfade15 figure:nth-of-type(3) {
  -moz-animation: fadefifteen 90s 12s ease-in-out infinite;
  -webkit-animation: fadefifteen 90s 12s ease-in-out infinite; 
  -ms-animation: fadefifteen 90s 12s ease-in-out infinite;
  -o-animation: fadefifteen 90s 12s ease-in-out infinite; 
  animation: fadefifteen 90s 12s ease-in-out infinite;}
.bilderfade15 figure:nth-of-type(4) {
  -moz-animation: fadefifteen 90s 18s ease-in-out infinite;
  -webkit-animation: fadefifteen 90s 18s ease-in-out infinite; 
  -ms-animation: fadefifteen 90s 18s ease-in-out infinite;
  -o-animation: fadefifteen 90s 18s ease-in-out infinite; 
  animation: fadefifteen 90s 18s ease-in-out infinite;}
.bilderfade15 figure:nth-of-type(5) {
  -moz-animation: fadefifteen 90s 24s ease-in-out infinite;
  -webkit-animation: fadefifteen 90s 24s ease-in-out infinite; 
  -ms-animation: fadefifteen 90s 24s ease-in-out infinite;
  -o-animation: fadefifteen 90s 24s ease-in-out infinite; 
  animation: fadefifteen 90s 24s ease-in-out infinite;}
.bilderfade15 figure:nth-of-type(6) {
  -moz-animation: fadefifteen 90s 30s ease-in-out infinite;
  -webkit-animation: fadefifteen 90s 30s ease-in-out infinite; 
  -ms-animation: fadefifteen 90s 30s ease-in-out infinite;
  -o-animation: fadefifteen 90s 30s ease-in-out infinite; 
  animation: fadefifteen 90s 30s ease-in-out infinite;}
.bilderfade15 figure:nth-of-type(7) {
  -moz-animation: fadefifteen 90s 36s ease-in-out infinite;
  -webkit-animation: fadefifteen 90s 36s ease-in-out infinite; 
  -ms-animation: fadefifteen 90s 36s ease-in-out infinite;
  -o-animation: fadefifteen 90s 36s ease-in-out infinite; 
  animation: fadefifteen 90s 36s ease-in-out infinite;}
.bilderfade15 figure:nth-of-type(8) {
  -moz-animation: fadefifteen 90s 42s ease-in-out infinite;
  -webkit-animation: fadefifteen 90s 42s ease-in-out infinite; 
  -ms-animation: fadefifteen 90s 42s ease-in-out infinite;
  -o-animation: fadefifteen 90s 42s ease-in-out infinite; 
  animation: fadefifteen 90s 42s ease-in-out infinite;}
.bilderfade15 figure:nth-of-type(9) {
  -moz-animation: fadefifteen 90s 48s ease-in-out infinite;
  -webkit-animation: fadefifteen 90s 48s ease-in-out infinite; 
  -ms-animation: fadefifteen 90s 48s ease-in-out infinite;
  -o-animation: fadefifteen 90s 48s ease-in-out infinite; 
  animation: fadefifteen 90s 48s ease-in-out infinite;}
.bilderfade15 figure:nth-of-type(10) {
  -moz-animation: fadefifteen 90s 54s ease-in-out infinite;
  -webkit-animation: fadefifteen 90s 54s ease-in-out infinite; 
  -ms-animation: fadefifteen 90s 54s ease-in-out infinite;
  -o-animation: fadefifteen 90s 54s ease-in-out infinite; 
  animation: fadefifteen 90s 54s ease-in-out infinite;}
.bilderfade15 figure:nth-of-type(11) {
  -moz-animation: fadefifteen 90s 60s ease-in-out infinite;
  -webkit-animation: fadefifteen 90s 60s ease-in-out infinite; 
  -ms-animation: fadefifteen 90s 60s ease-in-out infinite;
  -o-animation: fadefifteen 90s 60s ease-in-out infinite; 
  animation: fadefifteen 90s 60s ease-in-out infinite;}
.bilderfade15 figure:nth-of-type(12) {
  -moz-animation: fadefifteen 90s 66s ease-in-out infinite;
  -webkit-animation: fadefifteen 90s 66s ease-in-out infinite; 
  -ms-animation: fadefifteen 90s 66s ease-in-out infinite;
  -o-animation: fadefifteen 90s 66s ease-in-out infinite; 
  animation: fadefifteen 90s 66s ease-in-out infinite;}
.bilderfade15 figure:nth-of-type(13) {
  -moz-animation: fadefifteen 90s 72s ease-in-out infinite;
  -webkit-animation: fadefifteen 90s 72s ease-in-out infinite; 
  -ms-animation: fadefifteen 90s 72s ease-in-out infinite;
  -o-animation: fadefifteen 90s 72s ease-in-out infinite; 
  animation: fadefifteen 90s 72s ease-in-out infinite;}
.bilderfade15 figure:nth-of-type(14) {
  -moz-animation: fadefifteen 90s 78s ease-in-out infinite;
  -webkit-animation: fadefifteen 90s 78s ease-in-out infinite; 
  -ms-animation: fadefifteen 90s 78s ease-in-out infinite;
  -o-animation: fadefifteen 90s 78s ease-in-out infinite; 
  animation: fadefifteen 90s 78s ease-in-out infinite;}
.bilderfade15 figure:nth-of-type(15) {
  -moz-animation: fadefifteen 90s 84s ease-in-out infinite;
  -webkit-animation: fadefifteen 90s 84s ease-in-out infinite; 
  -ms-animation: fadefifteen 90s 84s ease-in-out infinite;
  -o-animation: fadefifteen 90s 84s ease-in-out infinite; 
 animation: fadefifteen 90s 84s ease-in-out infinite;}
/* Einblendung Überblendung 15 Bilder*/
@-moz-keyframes fadefifteen {
  2.22%, 6.66% {opacity: 1;}
  0%, 8.88%, 100% {opacity: 0;}}
@-webkit-keyframes fadefifteen {
  2.22%, 6.66% {opacity: 1;}
  0%, 8.88%, 100% {opacity: 0;}}
@-ms-keyframes fadefifteen {
  2.22%, 6.66% {opacity: 1;}
  0%, 8.88%, 100% {opacity: 0;}}
@-o-keyframes fadefifteen {
  2.22%, 6.66% {opacity: 1;}
  0%, 8.88%, 100% {opacity: 0;}}
@keyframes fadefifteen {
  2.22%, 6.66% {opacity: 1;}
  0%, 8.88%, 100% {opacity: 0;}}
.bilderfade15:hover figure, .bilderfade15:focus figure, .bilderfade15:target figure {
  -moz-animation-play-state: paused;
  -webkit-animation-play-state: paused;
  -ms-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;}
/*-------------------------------------------------------*/
/* Animation Bildbeschreibungen Animation für Slider 10 Bilder */
.bilderslide10 {
  position: relative;
  min-height: 19em;
  width: 100%;
  margin: 0;
  overflow: hidden;}
.bilderslide10 figure {
  position: absolute;
  top: 0; left: 0;
  -moz-opacity: 0;
  -webkit-opacity: 0;
  -o-opacity: 0;
  -ms-opacity: 0;
  opacity: 0;
  width: 100%;
  margin: 0;}
.bilderslide10 figcaption {
  position: relative;
  color: rgb(62,73,113); /* dnklblau 90% */
  text-align: left;
  font-size: 0.9em;
  font-weight: bold;
  padding: 2px;
  min-height: 2em;
  bottom: 0;
  z-index: -100;
  visibility: hidden;
  background: rgb(255,255,255);
  background: rgba(255,255,255,0.8);
  transition: 1s ease-in;
  -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;}
.bilderslide10:hover figcaption, .bilderslide10:target figcaption, .bilderslide10:focus figcaption {bottom: 3em;
  z-index: auto;
  visibility: visible;}
/* Diashow Seite shopdesign 6sec. pro Bild 10 Bilder --> 60sec Gesamtdauer */
/* Fallback-Bild */
.bilderslide10 figure:nth-of-type(1) {
  -moz-opacity: 1;
  -webkit-opacity: 1;
  -o-opacity: 1;
  -ms-opacity: 1;
  opacity: 1;}
.bilderslide10 figure:nth-of-type(1) {
  -moz-animation: slidetenright 60s ease-in-out infinite;
  -webkit-animation: slidetenright 60s ease-in-out infinite; 
  -ms-animation: slidetenright 60s ease-in-out infinite;
  -o-animation: slidetenright 60s ease-in-out infinite; 
  animation: slidetenright 60s ease-in-out infinite;}
.bilderslide10 figure:nth-of-type(2) {
  -moz-animation: slidetenright 60s 6s ease-in-out infinite;
  -webkit-animation: slidetenright 60s 6s ease-in-out infinite; 
  -ms-animation: slidetenright 60s 6s ease-in-out infinite;
  -o-animation: slidetenright 60s 6s ease-in-out infinite; 
  animation: slidetenright 60s 6s ease-in-out infinite;}
.bilderslide10 figure:nth-of-type(3) {
  -moz-animation: slidetenright 60s 12s ease-in-out infinite;
  -webkit-animation: slidetenright 60s 12s ease-in-out infinite; 
  -ms-animation: slidetenright 60s 12s ease-in-out infinite;
  -o-animation: slidetenright 60s 12s ease-in-out infinite; 
  animation: slidetenright 60s 12s ease-in-out infinite; }
.bilderslide10 figure:nth-of-type(4) {
  -moz-animation: slidetenright 60s 18s ease-in-out infinite;
  -webkit-animation: slidetenright 60s 18s ease-in-out infinite; 
  -ms-animation: slidetenright 60s 18s ease-in-out infinite;
  -o-animation: slidetenright 60s 18s ease-in-out infinite; 
  animation: slidetenright 60s 18s ease-in-out infinite;}
.bilderslide10 figure:nth-of-type(5) {
  -moz-animation: slidetenright 60s 24s ease-in-out infinite;
  -webkit-animation: slidetenright 60s 24s ease-in-out infinite; 
  -ms-animation: slidetenright 60s 24s ease-in-out infinite;
  -o-animation: slidetenright 60s 24s ease-in-out infinite; 
  animation: slidetenright 60s 24s ease-in-out infinite;}
.bilderslide10 figure:nth-of-type(6) {
  -moz-animation: slidetenright 60s 30s ease-in-out infinite;
  -webkit-animation: slidetenright 60s 30s ease-in-out infinite; 
  -ms-animation: slidetenright 60s 30s ease-in-out infinite;
  -o-animation: slidetenright 60s 30s ease-in-out infinite; 
  animation: slidetenright 60s 30s ease-in-out infinite; }
.bilderslide10 figure:nth-of-type(7) {
  -moz-animation: slidetenright 60s 36s ease-in-out infinite;
  -webkit-animation: slidetenright 60s 36s ease-in-out infinite; 
  -ms-animation: slidetenright 60s 36s ease-in-out infinite;
  -o-animation: slidetenright 60s 36s ease-in-out infinite; 
  animation: slidetenright 60s 36s ease-in-out infinite;}
.bilderslide10 figure:nth-of-type(8) {
  -moz-animation: slidetenright 60s 42s ease-in-out infinite;
  -webkit-animation: slidetenright 60s 42s ease-in-out infinite; 
  -ms-animation: slidetenright 60s 42s ease-in-out infinite;
  -o-animation: slidetenright 60s 42s ease-in-out infinite; 
  animation: slidetenright 60s 42s ease-in-out infinite;}
.bilderslide10 figure:nth-of-type(9) {
  -moz-animation: slidetenright 60s 48s ease-in-out infinite;
  -webkit-animation: slidetenright 60s 48s ease-in-out infinite; 
  -ms-animation: slidetenright 60s 48s ease-in-out infinite;
  -o-animation: slidetenright 60s 48s ease-in-out infinite; 
  animation: slidetenright 60s 48s ease-in-out infinite;}
.bilderslide10 figure:nth-of-type(10) {
  -moz-animation: slidetenright 60s 54s ease-in-out infinite;
  -webkit-animation: slidetenright 60s 54s ease-in-out infinite; 
  -ms-animation: slidetenright 60s 54s ease-in-out infinite;
  -o-animation: slidetenright 60s 54s ease-in-out infinite; 
  animation: slidetenright 60s 54s ease-in-out infinite;}
/* Slider von rechts nach links 10 Bilder*/
@-moz-keyframes slidetenright {
  3.33%, 10% {left: 0%; opacity: 1; z-index: auto;}
  13.33% {left: -100%; opacity: 0; z-index: -20;}
  0%, 100% {left: 100%; opacity: 0; z-index: -20;}}
@-webkit-keyframes slidetenright {
  3.33%, 10% {left: 0%; opacity: 1; z-index: auto;}
  13.33% {left: -100%; opacity: 0; z-index: -20;}
  0%, 100% {left: 100%; opacity: 0; z-index: -20;}}
@-ms-keyframes slidetenright {
  3.33%, 10% {left: 0%; opacity: 1; z-index: auto;}
  13.33% {left: -100%; opacity: 0; z-index: -20;}
  0%, 100% {left: 100%; opacity: 0; z-index: -20;}}
@-o-keyframes slidetenright {
  3.33%, 10% {left: 0%; opacity: 1; z-index: auto;}
  13.33% {left: -100%; opacity: 0; z-index: -20;}
  0%, 100% {left: 100%; opacity: 0; z-index: -20;}}
@keyframes slidetenright {
  3.33%, 10% {left: 0%; opacity: 1; z-index: auto;}
  13.33% {left: -100%; opacity: 0; z-index: -20;}
  0%, 100% {left: 100%; opacity: 0; z-index: -20;}}
.bilderslide10:hover figure, .bilderslide10:focus figure, .bilderslide10:target figure {
  -moz-animation-play-state: paused;
  -webkit-animation-play-state: paused;
  -ms-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;}
/*-------------------------------------------------------*/
/* Styles Animation und Bildbeschreibumg Seite für 15 Bilder Slider a 6sec. */
.bilderslide15 {
  position: relative;
  min-height: 19em;
  width: 100%;
  margin: 0;
  overflow: hidden;}
.bilderslide15 figure {
  position: absolute;
  top: 0; left: 0;
  -moz-opacity: 0;
  -webkit-opacity: 0;
  -o-opacity: 0;
  -ms-opacity: 0;
  opacity: 0;
  width: 100%;
  margin: 0;}
.bilderslide15 figcaption {
  position: relative;
  color: rgb(62,73,113); /* dnklblau 90% */
  text-align: left;
  font-size: 0.9em;
  font-weight: bold;
  padding: 2px;
  min-height: 2em;
  bottom: 0;
  z-index: -100;
  visibility: hidden;
  background: rgb(255,255,255);
  background: rgba(255,255,255,0.8);
  transition: 1s ease-in;
  -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;}
.bilderslide15:hover figcaption, .bilderslide15:target figcaption, .bilderslide15:focus figcaption {
  bottom: 3em;
  z-index: auto;
  visibility: visible;}
/* Diashow Seite shopdesign 6sec. pro Bild 15 Bilder --> 90sec Gesamtdauer */
/* Fallback-Bild */
.bilderslide15 figure:nth-of-type(1) {
  -moz-opacity: 1;
  -webkit-opacity: 1;
  -o-opacity: 1;
  -ms-opacity: 1;
  opacity: 1;}
.bilderslide15 figure:nth-of-type(1) {
  -moz-animation: slidefifteenleft 90s ease-in-out infinite; 
  -webkit-animation: slidefifteenleft 90s ease-in-out infinite; 
  -ms-animation: slidefifteenleft 90s ease-in-out infinite; 
  -o-animation: slidefifteenleft 90s ease-in-out infinite; 
  animation: slidefifteenleft 90s ease-in-out infinite;}
.bilderslide15 figure:nth-of-type(2) {
  -moz-animation: slidefifteenleft 90s 6s ease-in-out infinite;
  -webkit-animation: slidefifteenleft 90s 6s ease-in-out infinite; 
  -ms-animation: slidefifteenleft 90s 6s ease-in-out infinite;
  -o-animation: slidefifteenleft 90s 6s ease-in-out infinite; 
  animation: slidefifteenleft 90s 6s ease-in-out infinite;}
.bilderslide15 figure:nth-of-type(3) {
  -moz-animation: slidefifteenleft 90s 12s ease-in-out infinite;
  -webkit-animation: slidefifteenleft 90s 12s ease-in-out infinite; 
  -ms-animation: slidefifteenleft 90s 12s ease-in-out infinite;
  -o-animation: slidefifteenleft 90s 12s ease-in-out infinite; 
  animation: slidefifteenleft 90s 12s ease-in-out infinite;}
.bilderslide15 figure:nth-of-type(4) {
  -moz-animation: slidefifteenleft 90s 18s ease-in-out infinite;
  -webkit-animation: slidefifteenleft 90s 18s ease-in-out infinite; 
  -ms-animation: slidefifteenleft 90s 18s ease-in-out infinite;
  -o-animation: slidefifteenleft 90s 18s ease-in-out infinite; 
  animation: slidefifteenleft 90s 18s ease-in-out infinite;}
.bilderslide15 figure:nth-of-type(5) {
  -moz-animation: slidefifteenleft 90s 24s ease-in-out infinite;
  -webkit-animation: slidefifteenleft 90s 90s 24s ease-in-out infinite; 
  -ms-animation: slidefifteenleft 90s 24s ease-in-out infinite;
  -o-animation: slidefifteenleft 90s 24s ease-in-out infinite; 
  animation: slidefifteenleft 90s 24s ease-in-out infinite;}
.bilderslide15 figure:nth-of-type(6) {
  -moz-animation: slidefifteenleft 90s 30s ease-in-out infinite;
  -webkit-animation: slidefifteenleft 90s 30s ease-in-out infinite; 
  -ms-animation: slidefifteenleft 90s 30s ease-in-out infinite;
  -o-animation: slidefifteenleft 90s 30s ease-in-out infinite; 
  animation: slidefifteenleft 90s 30s ease-in-out infinite;}
.bilderslide15 figure:nth-of-type(7) {
  -moz-animation: slidefifteenleft 90s 36s ease-in-out infinite;
  -webkit-animation: slidefifteenleft 90s 36s ease-in-out infinite; 
  -ms-animation: slidefifteenleft 90s 36s ease-in-out infinite;
  -o-animation: slidefifteenleft 90s 36s ease-in-out infinite; 
  animation: slidefifteenleft 90s 36s ease-in-out infinite;}
.bilderslide15 figure:nth-of-type(8) {
  -moz-animation: slidefifteenleft 90s 42s ease-in-out infinite;
  -webkit-animation: slidefifteenleft 90s 42s ease-in-out infinite; 
  -ms-animation: slidefifteenleft 90s 42s ease-in-out infinite;
  -o-animation: slidefifteenleft 90s 42s ease-in-out infinite; 
  animation: slidefifteenleft 90s 42s ease-in-out infinite;}
.bilderslide15 figure:nth-of-type(9) {
  -moz-animation: slidefifteenleft 90s 48s ease-in-out infinite;
  -webkit-animation: slidefifteenleft 90s 48s ease-in-out infinite; 
  -ms-animation: slidefifteenleft 90s 48s ease-in-out infinite;
  -o-animation: slidefifteenleft 90s 48s ease-in-out infinite; 
  animation: slidefifteenleft 90s 48s ease-in-out infinite;}
.bilderslide15 figure:nth-of-type(10) {
  -moz-animation: slidefifteenleft 90s 54s ease-in-out infinite;
  -webkit-animation: slidefifteenleft 90s 54s ease-in-out infinite; 
  -ms-animation: slidefifteenleft 90s 54s ease-in-out infinite;
  -o-animation: slidefifteenleft 90s 54s ease-in-out infinite; 
  animation: slidefifteenleft 90s 54s ease-in-out infinite;}
.bilderslide15 figure:nth-of-type(11) {
  -moz-animation: slidefifteenleft 90s 60s ease-in-out infinite;
  -webkit-animation: slidefifteenleft 90s 60s ease-in-out infinite; 
  -ms-animation: slidefifteenleft 90s 60s ease-in-out infinite;
  -o-animation: slidefifteenleft 90s 60s ease-in-out infinite; 
  animation: slidefifteenleft 90s 60s ease-in-out infinite;}
.bilderslide15 figure:nth-of-type(12) {
  -moz-animation: slidefifteenleft 90s 66s ease-in-out infinite;
  -webkit-animation: slidefifteenleft 90s 66s ease-in-out infinite; 
  -ms-animation: slidefifteenleft 90s 66s ease-in-out infinite;
  -o-animation: slidefifteenleft 90s 66s ease-in-out infinite; 
  animation: slidefifteenleft 90s 66s ease-in-out infinite;}
.bilderslide15 figure:nth-of-type(13) {
  -moz-animation: slidefifteenleft 90s 72s ease-in-out infinite;
  -webkit-animation: slidefifteenleft 90s 72s ease-in-out infinite; 
  -ms-animation: slidefifteenleft 90s 72s ease-in-out infinite;
  -o-animation: slidefifteenleft 90s 72s ease-in-out infinite; 
  animation: slidefifteenleft 90s 72s ease-in-out infinite;}
.bilderslide15 figure:nth-of-type(14) {
  -moz-animation: slidefifteenleft 90s 78s ease-in-out infinite;
  -webkit-animation: slidefifteenleft 90s 78s ease-in-out infinite; 
  -ms-animation: slidefifteenleft 90s 78s ease-in-out infinite;
  -o-animation: slidefifteenleft 90s 78s ease-in-out infinite; 
  animation: slidefifteenleft 90s 78s ease-in-out infinite;}
.bilderslide15 figure:nth-of-type(15) {
  -moz-animation: slidefifteenleft 90s 84s ease-in-out infinite;
  -webkit-animation: slidefifteenleft 90s 84s ease-in-out infinite; 
  -ms-animation: slidefifteenleft 90s 84s ease-in-out infinite;
  -o-animation: slidefifteenleft 90s 84s ease-in-out infinite; 
  animation: slidefifteenleft 90s 84s ease-in-out infinite;}
/* Slider von links nach rechts 20 Bilder*/
@-moz-keyframes slidefifteenleft {
  2.22%, 6.66% {left: 0%; opacity: 1; z-index: auto;}
  8.88% {left: 100%; opacity: 0; z-index: -20;}
  0%, 100% {left: -100%; opacity: 0; z-index: -20;}}
@-webkit-keyframes slidefifteenleft {
  2.22%, 6.66% {left: 0%; opacity: 1; z-index: auto;}
  8.88% {left: 100%; opacity: 0; z-index: -20;}
  0%, 100% {left: -100%; opacity: 0; z-index: -20;}}
@-ms-keyframes slidefifteenleft {
  2.22%, 6.66% {left: 0%; opacity: 1; z-index: auto;}
  8.88% {left: 100%; opacity: 0; z-index: -20;}
  0%, 100% {left: -100%; opacity: 0; z-index: -20;}}
@-o-keyframes slidefifteenleft {
  2.22%, 6.66% {left: 0%; opacity: 1; z-index: auto;}
  8.88% {left: 100%; opacity: 0; z-index: -20;}
  0%, 100% {left: -100%; opacity: 0; z-index: -20;}}
@keyframes slidefifteenleft {
  2.22%, 6.66% {left: 0%; opacity: 1; z-index: auto;}
  8.88% {left: 100%; opacity: 0; z-index: -20;}
  0%, 100% {left: -100%; opacity: 0; z-index: -20;}}
.bilderslide15:hover figure, .bilderslide15:focus figure, .bilderslide15:target figure {
  -moz-animation-play-state: paused;
  -webkit-animation-play-state: paused;
  -ms-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;}
/*---------------------------------------------------------------*/
/* Styles für Slider vertikal und Bilbeschriftung für 5 Bilder a 6 sec. --> 30 sec*/
.bilderslide5 {
  position: relative;
  min-height: 19em;
  width: 100%;
  margin: 0;
  overflow: hidden;}
.bilderslide5 figure {
  position: absolute;
  top: 0; left: 0;
  -moz-opacity: 0;
  -webkit-opacity: 0;
  -o-opacity: 0;
  -ms-opacity: 0;
  opacity: 0;
  width: 100%;
  margin: 0;}
.bilderslide5 figcaption {
  position: relative;
  color: rgb(62,73,113); /* dnklblau 90% */
  text-align: left;
  font-size: 0.9em;
  font-weight: bold;
  padding: 2px;
  min-height: 2em;
  bottom: 0;
  z-index: -100;
  visibility: hidden;
  background: rgb(255,255,255);
  background: rgba(255,255,255,0.8);
  transition: 1s ease-in;
  -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;}
.bilderslide5:hover figcaption, .bilderslide5:target figcaption, .bilderslide5:focus figcaption {
  bottom: 3em;
  z-index: auto;
  visibility: visible;}
/* Diashow Unterseiten 6sec. pro Bild 5 Bilder --> 30sec Gesamtdauer */
/* Fallback-Bild */
.bilderslide5 figure:nth-of-type(1) {
  -moz-opacity: 1;
  -webkit-opacity: 1;
  -o-opacity: 1;
  -ms-opacity: 1;
  opacity: 1;}
.bilderslide5 figure:nth-of-type(1) {
  -moz-animation: slidertop 30s ease-in-out infinite;
  -webkit-animation: slidertop 30s ease-in-out infinite; 
  -ms-animation: slidertop 30s ease-in-out infinite;
  -o-animation: slidertop 30s ease-in-out infinite; 
  animation: slidertop 30s ease-in-out infinite;}
.bilderslide5 figure:nth-of-type(2) {
  -moz-animation: slidertop 30s 6s ease-in-out infinite;
  -webkit-animation: slidertop 30s 6s ease-in-out infinite; 
  -ms-animation: slidertop 30s 6s ease-in-out infinite;
  -o-animation: slidertop 30s 6s ease-in-out infinite; 
  animation: slidertop 30s 6s ease-in-out infinite;}
.bilderslide5 figure:nth-of-type(3) {
  -moz-animation: slidertop 30s 12s ease-in-out infinite;
  -webkit-animation: slidertop 30s 12s ease-in-out infinite; 
  -ms-animation: slidertop 30s 12s ease-in-out infinite;
  -o-animation: slidertop 30s 12s ease-in-out infinite; 
  animation: slidertop 30s 12s ease-in-out infinite; }
.bilderslide5 figure:nth-of-type(4) {
  -moz-animation: slidertop 30s 18s ease-in-out infinite;
  -webkit-animation: slidertop 30s 18s ease-in-out infinite; 
  -ms-animation: slidertop 30s 18s ease-in-out infinite;
  -o-animation: slidertop 30s 18s ease-in-out infinite; 
  animation: slidertop 30s 18s ease-in-out infinite;}
.bilderslide5 figure:nth-of-type(5) {
  -moz-animation: slidertop 30s 24s ease-in-out infinite;
  -webkit-animation: slidertop 30s 24s ease-in-out infinite; 
  -ms-animation: slidertop 30s 24s ease-in-out infinite;
  -o-animation: slidertop 30s 24s ease-in-out infinite; 
  animation: slidertop 30s 24s ease-in-out infinite;}
/* Slider von oben nach unten 5 Bilder*/
@-moz-keyframes slidertop {
  6.66%, 20% {top: 0%; opacity: 1; z-index: auto;}
  26.66% {top: 100%; opacity: 0; z-index: -20;}
  0%, 100% {top: -100%; opacity: 0; z-index: -20;}}
@-webkit-keyframes slidertop {
  6.66%, 20% {left: 0%; opacity: 1; z-index: auto;}
  26.66% {left: -100%; opacity: 0; z-index: -20;}
  0%, 100% {left: 100%; opacity: 0; z-index: -20;}}
@-ms-keyframes slidertop {
  6.66%, 20% {left: 0%; opacity: 1; z-index: auto;}
  26.66% {left: -100%; opacity: 0; z-index: -20;}
  0%, 100% {left: 100%; opacity: 0; z-index: -20;}}
@-o-keyframes slidertop {
  6.66%, 20% {left: 0%; opacity: 1; z-index: auto;}
  26.66% {left: -100%; opacity: 0; z-index: -20;}
  0%, 100% {left: 100%; opacity: 0; z-index: -20;}}
@keyframes slidertop {
  6.66%, 20% {top: 0%; opacity: 1; z-index: auto;}
  26.66% {top: 100%; opacity: 0; z-index: -20;}
  0%, 100% {top: -100%; opacity: 0; z-index: -20;}}
.sliderbilder:hover figure, .sliderbilder:focus figure, .sliderbilder:target figure {
  -moz-animation-play-state: paused;
  -webkit-animation-play-state: paused;
  -ms-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;}
/*-------------------------------------------------------------------------*/
/*inhalte: Seite blumen-und-pflanzen und floristik*/
#schnittblumen h4, #topfpflanzen h4, #floristiksaison h4, #floristikhochzeit h4, #floristiktrauer h4, #floristikostern h4, #floristikmuttertag h4, #floristikherbst h4, #floristikallerheiligen h4, #floristikweihnachten h4, #floristikneujahr h4 {
  font-size: 0.95em;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  -o-hyphens: auto;
  -ms-hyphens: auto; /*silbentrennung*/
  hyphens: auto;
  color: rgb(230,230,250);
  text-shadow: rgb(14,27,78) 1px 1px 1px;
  transition: color 0.5s ease;
  padding-top: 1.5em;
  padding-left: 0.2em;}
#schnittblumen:hover h4, #schnittblumen:target h4, #schnittblumen:focus h4, #topfpflanzen:hover h4, #topfpflanzen:target h4, #topfpflanzen:focus h4, #floristiksaison:hover h4, #floristiksaison:target h4, #floristiksaison:focus h4, #floristikhochzeit:hover h4, #floristikhochzeit:target h4, #floristikhochzeit:focus h4, #floristiktrauer:hover h4, #floristiktrauer:target h4, #floristiktrauer:focus h4, #floristikostern:hover h4, #floristikostern:target h4, #floristikostern:focus h4, #floristikmuttertag:hover h4, #floristikmuttertag:target h4, #floristikmuttertag:focus h4, #floristikherbst:hover h4, #floristikherbst:target h4, #floristikherbst:focus h4, #floristikallerheiligen:hover h4, #floristikallerheiligen:target h4, #floristikallerheiligen:focus h4, #floristikweihnachten:hover h4, #floristikweihnachten:target h4, #floristikweihnachten:focus h4, #floristikneujahr:hover h4, #floristikneujahr:target h4, #floristikneujahr:focus h4 {
  color: white;} 
#schnittblumen {
  background-color: white;
  background: url('../images/inhalte_bluemchen/bouquets-und-straeusse/bunter_strauss2.jpg') no-repeat;
  width: 5em;
  height: 5em; 
  float: left;
  -moz-opacity: 0.8;
  -o-opacity: 0.8;
  -webkit-opacity: 0.8;
  -ms-opacity: 0.8;
  opacity: 0.8;
  -moz-background-size: contain;
  -o-background-size: contain;
  -webkit-background-size: contain;
  -ms-background-size: contain;
  background-size: contain;
  margin-top: 0.6em;
  margin-bottom: 0.6em;
  margin-right: 0.5em;
  margin-left: 0.5em;
  transition: opacity 0.5s ease;}
#schnittblumen:hover, #schnittblumen:target, #schnittblumen:focus {
  -moz-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  -ms-opacity: 1;
  opacity: 1;} 
#topfpflanzen {
  background-color: white;
  background: url('../images/inhalte_bluemchen/blumenstoecke/orchidee_dekoriert_rose.jpg') no-repeat;
  width: 5em;
  height: 5em; 
  float: left;
  -moz-opacity: 0.8;
  -o-opacity: 0.8;
  -webkit-opacity: 0.8;
  -ms-opacity: 0.8;
  opacity: 0.8;
  -moz-background-size: contain;
  -o-background-size: contain;
  -webkit-background-size: contain;
  -ms-background-size: contain;
  background-size: contain;
  margin-top: 0.6em;
  margin-bottom: 0.6em;
  margin-right: 0.5em;
  margin-left: 0.5em;
  transition: opacity 0.5s ease;}
#topfpflanzen:hover, #topfpflanzen:target, #topfpflanzen:focus {
  -moz-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  -ms-opacity: 1;
  opacity: 1;}   
#floristiksaison {
  background-color: white;
  background: url('../images/inhalte_bluemchen/fotos_neu_web_2015/allerheiligen/schale_mit_rosen.jpg') no-repeat;
  width: 5em;
  height: 5em; 
  float: left;
  -moz-opacity: 0.8;
  -o-opacity: 0.8;
  -webkit-opacity: 0.8;
  -ms-opacity: 0.8;
  opacity: 0.8;
  -moz-background-size: contain;
  -o-background-size: contain;
  -webkit-background-size: contain;
  -ms-background-size: contain;
  background-size: contain;
  margin-top: 0.6em;
  margin-bottom: 0.6em;
  margin-right: 0.5em;
  margin-left: 0.5em;
  transition: opacity 0.5s ease;}
#floristiksaison:hover, #floristiksaison:target, #floristiksaison:focus {
  -moz-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  -ms-opacity: 1;
  opacity: 1;}   
#floristikhochzeit {
  background-color: white;
  background: url('../images/inhalte_bluemchen/fotos_neu_web_2015/hochzeit/rosen_bouquet2.jpg') no-repeat;
  width: 5em;
  height: 5em; 
  float: left;
  -moz-opacity: 0.8;
  -o-opacity: 0.8;
  -webkit-opacity: 0.8;
  -ms-opacity: 0.8;
  opacity: 0.8;
  -moz-background-size: contain;
  -o-background-size: contain;
  -webkit-background-size: contain;
  -ms-background-size: contain;
  background-size: contain;
  margin-top: 0.6em;
  margin-bottom: 0.6em;
  margin-right: 0.5em;
  margin-left: 0.5em;
  transition: opacity 0.5s ease;}
#floristikhochzeit:hover, #floristikhochzeit:target, #floristikhochzeit:focus {
  -moz-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  -ms-opacity: 1;
  opacity: 1;}    
#floristiktrauer {
  background-color: white;
  background: url('../images/inhalte_bluemchen/fotos_neu_web_2015/trauer/kranz_bunt.jpg') no-repeat;
  width: 5em;
  height: 5em; 
  float: left;
  -moz-opacity: 0.8;
  -o-opacity: 0.8;
  -webkit-opacity: 0.8;
  -ms-opacity: 0.8;
  opacity: 0.8;
  -moz-background-size: contain;
  -o-background-size: contain;
  -webkit-background-size: contain;
  -ms-background-size: contain;
  background-size: contain;
  margin-top: 0.6em;
  margin-bottom: 0.6em;
  margin-right: 0.5em;
  margin-left: 0.5em;
  transition: opacity 0.5s ease;}
#floristiktrauer:hover, #floristiktrauer:target, #floristiktrauer:focus {
  -moz-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  -ms-opacity: 1;
  opacity: 1;} 
#floristikostern {
  background-color: white;
  background: url('../images/inhalte_bluemchen/fotos_neu_web_2015/ostern/oster_gestecke.jpg') no-repeat;
  width: 5em;
  height: 5em; 
  float: left;
  -moz-opacity: 0.8;
  -o-opacity: 0.8;
  -webkit-opacity: 0.8;
  -ms-opacity: 0.8;
  opacity: 0.8;
  -moz-background-size: contain;
  -o-background-size: contain;
  -webkit-background-size: contain;
  -ms-background-size: contain;
  background-size: contain;
  margin-top: 0.6em;
  margin-bottom: 0.6em;
  margin-right: 0.5em;
  margin-left: 0.5em;
  transition: opacity 0.5s ease;}
#floristikostern:hover, #floristikostern:target, #floristikostern:focus {
  -moz-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  -ms-opacity: 1;
  opacity: 1;}        
#floristikmuttertag {
  background-color: white;
  background: url('../images/inhalte_bluemchen/fotos_neu_web_2015/topfpflanzen/muttertag/dekorierter_blumenstock_weiss.jpg') no-repeat;
  width: 5em;
  height: 5em; 
  float: left;
  -moz-opacity: 0.8;
  -o-opacity: 0.8;
  -webkit-opacity: 0.8;
  -ms-opacity: 0.8;
  opacity: 0.8;
  -moz-background-size: contain;
  -o-background-size: contain;
  -webkit-background-size: contain;
  -ms-background-size: contain;
  background-size: contain;
  margin-top: 0.6em;
  margin-bottom: 0.6em;
  margin-right: 0.5em;
  margin-left: 0.5em;
  transition: opacity 0.5s ease;}
#floristikmuttertag:hover, #floristikmuttertag:target, #floristikmuttertag:focus {
  -moz-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  -ms-opacity: 1;
  opacity: 1;}    
#floristikherbst {
  background-color: white;
  background: url('../images/inhalte_bluemchen/fotos_neu_web_2015/herbst/dekorierte_herbstschale4.jpg') no-repeat;
  width: 5em;
  height: 5em; 
  float: left;
  -moz-opacity: 0.8;
  -o-opacity: 0.8;
  -webkit-opacity: 0.8;
  -ms-opacity: 0.8;
  opacity: 0.8;
  -moz-background-size: contain;
  -o-background-size: contain;
  -webkit-background-size: contain;
  -ms-background-size: contain;
  background-size: contain;
  margin-top: 0.6em;
  margin-bottom: 0.6em;
  margin-right: 0.5em;
  margin-left: 0.5em;
  transition: opacity 0.5s ease;}
#floristikherbst:hover, #floristikherbst:target, #floristikherbst:focus {
  -moz-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  -ms-opacity: 1;
  opacity: 1;}      
#floristikallerheiligen {
  background-color: white;
  background: url('../images/inhalte_bluemchen/allerheiligen/rosenherz_rosa2.jpg') no-repeat;
  width: 5em;
  height: 5em; 
  float: left;
  -moz-opacity: 0.8;
  -o-opacity: 0.8;
  -webkit-opacity: 0.8;
  -ms-opacity: 0.8;
  opacity: 0.8;
  -moz-background-size: contain;
  -o-background-size: contain;
  -webkit-background-size: contain;
  -ms-background-size: contain;
  background-size: contain;
  margin-top: 0.6em;
  margin-bottom: 0.6em;
  margin-right: 0.5em;
  margin-left: 0.5em;
  transition: opacity 0.5s ease;}
#floristikallerheiligen:hover, #floristikallerheiligen:target, #floristikallerheiligen:focus {
  -moz-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  -ms-opacity: 1;
  opacity: 1;}     
#floristikweihnachten {
  background-color: white;
  background: url('../images/inhalte_bluemchen/fotos_neu_web_2015/weihnachten/weihnachts_gesteck9.jpg') no-repeat;
  width: 5em;
  height: 5em; 
  float: left;
  -moz-opacity: 0.8;
  -o-opacity: 0.8;
  -webkit-opacity: 0.8;
  -ms-opacity: 0.8;
  opacity: 0.8;
  -moz-background-size: contain;
  -o-background-size: contain;
  -webkit-background-size: contain;
  -ms-background-size: contain;
  background-size: contain;
  margin-top: 0.6em;
  margin-bottom: 0.6em;
  margin-right: 0.5em;
  margin-left: 0.5em;
  transition: opacity 0.5s ease;}
#floristikweihnachten:hover, #floristikweihnachten:target, #floristikweihnachten:focus {
  -moz-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  -ms-opacity: 1;
  opacity: 1;}       
#floristikneujahr {
  background-color: white;
  background: url('../images/inhalte_bluemchen/fotos_neu_web_2015/neujahr/gluecksbringer_mit_klee.jpg') no-repeat;
  width: 5em;
  height: 5em; 
  float: left;
  -moz-opacity: 0.8;
  -o-opacity: 0.8;
  -webkit-opacity: 0.8;
  -ms-opacity: 0.8;
  opacity: 0.8;
  -moz-background-size: contain;
  -o-background-size: contain;
  -webkit-background-size: contain;
  -ms-background-size: contain;
  background-size: contain;
  margin-top: 0.6em;
  margin-bottom: 0.6em;
  margin-right: 0.5em;
  margin-left: 0.5em;
  transition: opacity 0.5s ease;}
#floristikneujahr:hover, #floristikneujahr:target, #floristikneujahr:focus {
  -moz-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  -ms-opacity: 1;
  opacity: 1;}         
#textagb {
  max-height: 45em;
  overflow: scroll;
}
/*---------------------------------------------------------------------*/
/* Styles für Kontaktformular */
#kontaktformular {
  width: 100%;
  max-width: 440px;}
#kontaktformular small {
  font-size: 0.85em;}
span.pflichtfeld {
  color: red;
  font-size: 0.85em;}
blockquote {
   width: 90%;
   max-width: 400px;}
radio {
  width: 18px;
  height: 18px;}
label {
  width: 40%;
  text-align: left;
  vertical-align: middle;
  color: rgb(14,27,78); /* dunkelblau*/
  font-size: 1em;
  font-weight: bold;
  margin-bottom: 0.2em;}
#vorname, #nachname, #myemail, #betreff, #anliegen {
  border: 1px solid rgb(14,27,78); /* dunkelblau */
  margin: 0.4em;
  min-height: 30px;
  padding: 0.2em;
  text-decoration: none;}
input#vorname, input#nachname, input#myemail, input#betreff, textarea#anliegen {
  font-family:  Myriad, Helvetica, Arial, Trebuchet, Verdana, sans-serif;
  text-align: left;
  color: rgb(14,27,78); /* dunkelblau */
  font-size: 1em;
  font-weight: bold
  width: 90%;
  max-width: 305px;
  background-color: transparent;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;}
#vorname:focus, #vorname:hover, #vorname:target, #nachname:focus, #nachname:hover, #nachname:target, #myemail:focus, #myemail:hover, #myemail:target, #betreff:focus, #betreff:hover, #betreff:target, textarea#anliegen:focus, textarea#anliegen:hover, textarea#anliegen:target {
  color: white;
  background-color: rgb(107,157,184); /* Blümchenblau 60% */
  text-decoration: none;
}
#senden, #loeschen, #vorschau {
  color: rgb(14,27,78); /* dunkelblau  */
  font-weight: bold;
  font-size: 1.1em;
  margin-top: 3px;
  margin-left: 2px;
  padding: 2px;
  border: 1px solid rgb(22,53,65); /* dunkelblau */
  background-color: rgb(107,157,184); /* Blümchenblau 60%  */
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;}
#senden:hover, #senden:focus, #senden:target, #loeschen:hover, #loeschen:focus, #loeschen:target, #vorschau:hover, #vorschau:focus, #vorschau:target {
  color: white;
  background-color: rgb(14,27,78); /* dunkelblau  */
}
  
  
  
       
/*-------------------------------------------------------------*/
/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/
/* media Query Styles ab 480px */
/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/
@media screen and (min-width:30em) {
#content {
  font-size: 75%; /* 12--> 1em*/}
#iframebig {
  width: 80%;
  max-width: 400px;
  min-height: 300px;
  margin-left: 10%; }
/* Styles für topheader */
span#facebooktop[data-icon]::before, span#kontakttop[data-icon]::before, span#phonetop[data-icon]::before {
  -moz-transform: scale(0.7);
  -o-transform: scale(0.7);
  -webkit-transform: scale(0.7);
  -ms-transform: scale(0.7);
  transform: scale(0.7);}
/* Hauptnavigation bis 800 nur 4 Navigationspunkte sichtbar */
li#mainnav1, li#mainnav7, li#mainnav6 {
  width: 33.3%;}
#mainnav h1 {
  padding-left: 2px;}
li#mainnav1[data-icon]::before, li#mainnav6[data-icon]::before, li#mainnav7[data-icon]::before  {
  margin-top: 3px;
  -moz-transform: scale(0.7);
  -o-transform: scale(0.7);
  -webkit-transform: scale(0.7);
  -ms-transform: scale(0.7);
  transform: scale(0.7);}
li#mainnav1[data-icon]::before {
  margin-left: 30px;
  margin-right: 25px;}
li#mainnav6[data-icon]::before {
  margin-left: 20px;
  margin-right: 25px;}
li#mainnav7[data-icon]::before {
  margin-left: 40px;
  margin-right: 25px;}
/* Styles für responsive - Navigation die eingeblendet wird */
/* ---Styles für responsive Navigation zum Einblenden bis 800px----------*/
#angebot {
  top: 17em;}
#subnav ul li h2 {
  font-size: 1.1em;}
#subnav ul li h3 {
  font-size: 1em;}
li#subblumen[data-icon]::before, li#subfloristik[data-icon]::before, li#subaccessoires[data-icon]::before, li#subcandle[data-icon]::before, li#subkontakt[data-icon]::before, li#subimpressum[data-icon]::before, li#subagb[data-icon]::before {
  margin-right: 3px;
  margin-left: 10px;
  -moz-transform: scale(0.7);
  -o-transform: scale(0.7);
  -webkit-transform: scale(0.7);
  -ms-transform: scale(0.7);
  transform: scale(0.7);}
/*------------------------------------------------------*/

/*-----------------------------------------------------------------*/
/* Style für Inhaltsboxen */
/* container: Ausgabebereite für 100% --> max-width 590px  98%-->578*/
#mainleft {
  width: 100%;
  max-width: 590px;
  margin-bottom: 0.5em;} 
/* Box mit Border in mainleft*/  
#mainleftbox {
  width: 98%; /*----> 578px */
  margin-left: 1%;
  min-height: 13em;
  margin-right: 0;}
#main {
  width: 100%;
  max-width: 590px;
  margin-bottom: 0.5em;} 
/* Box mit Border in main*/  
#mainbox {
  width: 98%; /*----> 578px */
  margin-left: 1%;
  min-height: 45em;
  margin-right: 0;}
.maininside {}
/* container für Diabox */  
#mainright {
  width: 100%;
  max-width: 590px;
  margin-bottom: 0.5em;}
/* Box mit Border in mainright*/  
#mainrightbox {
  width: 98%; /*----> 578px */
  margin-left: 1%;
  margin-right: 0;}

/* Styles für Footboxen
#footbox1, #footbox2 {
  width: 45%;
  margin-left: 2.5%;
  float: left;
  padding: 0.2em;
  min-height: 22em;
  white-space: nowrap;} */
#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 */ }
/* Styles footbox 2: Informationen */
#footbox2 ul {
  margin-top: 1em;}
#footbox2 ul li {
  height: 0.3em;}
li#footkontakt[data-icon]::before, li#footimpressum[data-icon]::before, li#footagb[data-icon]::before, li#footsitemap[data-icon]::before {
  -moz-transform: scale(0.7);
  -o-transform: scale(0.7);
  -webkit-transform: scale(0.7);
  -ms-transform: scale(0.7);
  transform: scale(0.7);
  margin-top: -0.6em;}
/* Styles für Bilder und Diashow Boxen */
/* box für diashows */
.maindiabox {
  width: 40%;
  max-width: 231px; /* gemessen an größe von mainrightbox--> 578px*/
  margin-left: 30%;}
/* box für diashow die neben dann über statischer Bildbox steht */
.maindiaboxsmall {
  width: 40%;
  max-width: 231px; /* gemessen an max-widt größe von mainrightbox-->578px*/
  float: left;
  margin-left: 6.5%;
  margin-bottom: 2em;}
/* box für bild die neben/unter diashow (maindiaboxsmall) steht) */
.maindiaboxsmallbild {
  width: 40%;
  max-width: 231px; /* gemessen an max-widt größe von mainrightbox-->578px*/
  float: left;
  margin-left: 6.5%;
  margin-bottom: 2em;}
.maindiaboxtwo {
  width: 40%;
  max-width: 231px; /* gemessen an max-widt größe von mainrightbox-->578px*/
  float: left;
  margin-left: 6.5%;
  margin-bottom: 2em;}  
.bildmain {
  max-width: 144px; /* 3 Bilder (25%) gemessen an größe von mainleftbox--> 578px */}
/*-------------------------------------------------*/
#schnittblumen h4, #topfpflanzen h4, #floristiksaison h4, #floristikhochzeit h4, #floristiktrauer h4, #floristikostern h4, #floristikmuttertag h4, #floristikherbst h4, #floristikallerheiligen h4, #floristikweihnachten h4, #floristikneujahr h4 {
  font-size: 1em;
  padding-top: 2em;}
#schnittblumen, #topfpflanzen, #floristiksaison, #floristikhochzeit, #floristiktrauer, h4, #floristikostern, #floristikmuttertag, #floristikherbst, #floristikallerheiligen, #floristikweihnachten, #floristikneujahr {
  width: 6em;
  height: 6em;}
/* Sonstige Styles*/
iframe {
  min-height: 180px;
  min-width: 180px;
  max-width: 231px;
  max-height: 231px;}
#textagb {
  max-height: 45em;} 
/* Styles für Kontaktformular */
#kontaktformular {
  width: 100%;
  max-width: 550px;}
#kontaktformular small {
  font-size: 0.9em;}
span.pflichtfeld {
  font-size: 0.9em;}
blockquote {
   width: 90%;
   max-width: 550px;}
label {
  width: 40%;
  margin-bottom: 0.2em;}
#vorname, #nachname, #myemail, #betreff, #anliegen {
  margin: 0.4em;
  min-height: 20px;
  padding: 0.2em;
  text-decoration: none;}
input#vorname, input#nachname, input#myemail, input#betreff, textarea#anliegen {
  font-size: 1em;
  width: 80%;
  max-width: 440px;}
#senden, #loeschen, #vorschau {
  font-size: 1.1em;
  margin-top: 3px;
  margin-left: 2px;
  padding: 3px;}  
  
  
  
  
  
}
/*-------------------------------------------------------------------*/
/*-------------------------------------------------------------------*/
/* media Query Styles ab 592px */
/*---------------------------------------------------------------*/
/*-------------------------------------------------------------------*/
@media screen and (min-width: 37em) {
#content {
  font-size: 80%; /* 12.8px--> 1em*/}
/* Styles für topheader */
span#facebooktop[data-icon]::before, span#kontakttop[data-icon]::before, span#phonetop[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);}
/* Hauptnavigation bis 800 nur 4 Navigationspunkte sichtbar */
#mainnav {
  margin-top: -0.2em;}
li#mainnav1 h1, li#mainnav6 h1, li#mainnav7 h1 {
  padding-top: 13px;
  padding-bottom: 5px;
  font-size: 1.2em; /* 14,4 px */}
li#mainnav1 h1 {
  padding-right: 40px;
  padding-left: 0px;}
li#mainnav6 h1 {
  padding-right: 40px;
  padding-left: 0px;}
li#mainnav7 h1 {
  padding-right: 40px;
  padding-left: 0px;}
li#mainnav1[data-icon]::before, li#mainnav6[data-icon]::before, li#mainnav7[data-icon]::before {
  margin-left: 55px;
  margin-right: 40px;
  margin-top: 6px;
  -moz-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);}
/* Bild-Animationsbox unterhalb der Navigation */
#headboxbottom {
  display: block;
  min-height: 4.1em; /* 50px bei Breite von 600px dann bei 1200 --> 100px*/}
/* Styles für responsive - Navigation die eingeblendet wird */
#angebot {
  top: 18em;}
#subnav ul li h2 {
  font-size: 1.1em;}
#subnav ul li h3 {
  font-size: 1em;}
li#subblumen[data-icon]::before, li#subfloristik[data-icon]::before, li#subaccessoires[data-icon]::before, li#subcandle[data-icon]::before, li#subkontakt[data-icon]::before, li#subimpressum[data-icon]::before, li#subagb[data-icon]::before {
  margin-right: 3px;
  margin-left: 10px;
  -moz-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);}
/*------------------------------------------------------------------*/
/* Styles für inhalt*/
/* container: Ausgabebereite für 100% für max-width --> 98% von 798px --> 782px */
#maincontent {
  min-height: 15em;
  margin-top: 1.5em;}  
#mainleft {
  width: 30%;
  float: left;
  max-width: 239px;
  margin-top: 0;
  margin-bottom: 0.5em;} 
/* Box mit Border in mainleft*/  
#mainleftbox {
  width: 98%; /*----> 234 */
  margin-left: 1%;
  margin-right: 0;}
/* container für Text */     
#main {
  width: 70%;
  float: right;
  max-width: 558px; 
  margin-bottom: 0.5em;} 
/* Box mit Border in main*/  
#mainbox {
  width: 90%; /*----> 546 */
  margin-left: 5%;
  margin-right: 0;
  min-height: 55em;}
.maininside {}
/* container für Diabox */  
#mainright {
  width: 100%;
  clear: both;
  float: none;
  max-width: 798px;
  margin-bottom: 0.5em;}
/* Box mit Border in mainright*/  
#mainrightbox {
  width: 98%; /*----> 782 */
  margin-left: 1%;
  margin-right: 0;}
/*-------------------------------------------------------------------*/
/* Styles für Bild und Diaboxen */
.maindiabox {
  width: 30%;
  max-width: 234px; /* gemessen an größe max-width von mainright-->782*/
  margin-left: 35%;
  margin-bottom: 2em;}
/* box für diashow die neben dann über statischer Bildbox steht */
.maindiaboxsmall {
  width: 30%;
  max-width: 234px; /* gemessen an max-widt größe von mainright-->782px*/
  float: left;
  margin-left: 13.2%;
  margin-bottom: 2em;}
/* box für bild die neben/unter diashow (maindiaboxsmall) steht) */
.maindiaboxsmallbild {
  width: 30%;
  max-width: 234px; /* gemessen an max-widt größe von mainright-->782px*/
  float: left;
  margin-left: 13.2%;
  margin-bottom: 2em;}
.maindiaboxtwo {
  width: 30%;
  max-width: 234px; /* gemessen an max-widt größe von mainright-->782px*/
  float: left;
  margin-left: 13.2%;
  margin-bottom: 2em;}
.bildmain {
  width: 70%;
  margin-bottom: 0.5em;
  max-width: 163px; /* gemessen an größe max-width von mainleft -->234*/
  margin-left: 15%;}  
/* Styles footbox 2: Informationen */
#footbox2 ul {
  margin-top: 0.8em;}
li#footkontakt[data-icon]::before, li#footimpressum[data-icon]::before, li#footagb[data-icon]::before, li#footsitemap[data-icon]::before {
  -moz-transform: scale(0.75);
  -o-transform: scale(0.75);
  -webkit-transform: scale(0.75);
  -ms-transform: scale(0.75);
  transform: scale(0.75);
  margin-top: -0.6em;}  
/* 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 {font-size: 1.1em; /* 13,2px */
  line-height: 1.1em;}
small {font-size: 0.85em;}
/* sonstige Styles */
iframe {
  min-height: 231px;
  min-width: 231px;
  max-width: 234px;
  max-height: 234px;}
/*----------------------------------------------------------------*/
/*Styles für Inhalte */
#textagb {
  max-height: 55em;}
/* Styles für Kontaktformular */
#kontaktformular {
  width: 100%;
  max-width: 530px;}
#kontaktformular small {
  font-size: 0.9em;}
span.pflichtfeld {
  font-size: 0.9em;}
blockquote {
   width: 90%;
   max-width: 500px;}
label {
  margin-bottom: 0.2em;}
#vorname, #nachname, #myemail, #betreff, #anliegen {
  margin: 0.4em;
  min-height: 20px;
  padding: 0.2em;
  text-decoration: none;}
input#vorname, input#nachname, input#myemail, input#betreff, textarea#anliegen {
  font-size: 1em;
  width: 80%;
  max-width: 450px;}
#senden, #loeschen, #vorschau {
  font-size: 1.1em;
  margin-top: 3px;
  margin-left: 2px;
  padding: 4px;}  
  
  
  
  


}

/*----------------------------------------------------------------*/
/*----------------------------------------------------------------*/
/* media Query Styles ab 800px */
/*----------------------------------------------------------------*/
/*----------------------------------------------------------------*/
@media screen and (min-width: 50em) {
#bigcontentoutside {
  margin: 5px auto;}  
#content {
  font-size: 80%; /* 12,8px--> 1em*/}
#iframebig {
  width: 80%;
  max-width: 400px;
  min-height: 400px;
  margin-left: 10%; }
/* Styles für topheader */
/* Styles für Hauptnavigation */
li#mainnav7 {
  display: none;}
li#mainnav6 {
  float: right;}  
li#mainnav2, li#mainnav3, li#mainnav4, li#mainnav5 {
  display: inline;}
#mainnav h1 {
  padding-top: 10px;
  padding-bottom: 5px;
  font-size: 0.8em;}
/* ganz langer Navigationspunkt (3teile) */
li#mainnav2 {
  width: 24.9%;}
/* längere Navigationspunkte (2teile) */
li#mainnav1, li#mainnav3, li#mainnav4,  li#mainnav5, li#mainnav6 {
  width: 16.6%;}     
li#mainnav1 {
  width: 8.5%;}
/* Styles für Hauptnavigationspunkte */
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 {
 -moz-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);
  margin-right: 0;}

li#mainnav1[data-icon]::before {margin-left: -0.1em; margin-top: 5px;}
li#mainnav2[data-icon]::before {margin-left: 2.2em; margin-top: 5px;}
li#mainnav3[data-icon]::before {margin-left: 1.6em; margin-top: 5px;}
li#mainnav4[data-icon]::before {margin-left: 0.4em; margin-top: 5px;}
li#mainnav5[data-icon]::before {margin-left: -0.3em; margin-top: 5px;}
li#mainnav6[data-icon]::before {margin-left: 0.4em; margin-top: 5px;}

#angebot {
  display: none;}

/*----------------------------------------------------------------------*/
/* Hauptinhaltbox mit Basisangaben */
/* container: Ausgabebereite für 100% für max-width --> 98% von max-width 1023px --> 1000px*/
#maincontent {
  margin-top: 1.5em;} 
#mainleft {
  width: 20%;
  max-width: 204px;
  margin-bottom: 0.5em;} 
/* Box mit Border in mainleft*/  
#mainleftbox {
  width: 98%; /*----> 199.9->200px */
  margin-left: 1%;
  margin-right: 0;
  margin-top: 1em;}
/* container für Text */     
#main {
  width: 50%;
  clear: right;
  float: left;
  max-width: 511px; 
  margin-bottom: 0.5em;} 
/* Box mit Border in main*/  
#mainbox {
  width: 98%; /*----> 500px */
  min-height: 50em;
  margin-left: 1%;
  margin-right: 0;
  margin-top: 1em;}
.maininside {}
/* container für Diabox */  
#mainright {
  width: 30%;
  clear: none;
  float: right;
  max-width: 306px;
  margin-bottom: 0.5em;}
/* Box mit Border in mainright*/  
#mainrightbox {
  width: 98%; /*----> 299.88*/
  margin-left: 0;
  margin-right: 1%;
  margin-top: 1em;}
/*-------------------------------------------------------------------*/
/* box für diashows */
/* Box die alleine steht */
.maindiabox {
  width: 80%;
  float: right;
  max-width: 240px; /* gemessen an größe von mainrightbox 98%--> 300px*/
  margin-right: 10%;
  margin-bottom: 0.2em;}
/* box für diashow die neben dann über/unter statischer Bildbox steht */
.maindiaboxsmall {
  width: 80%;
  float: right;
  max-width: 240px; /* gemessen an größe von mainrightbox--> 329px*/
  margin-right: 10%;
  margin-bottom: 0.2em;}
/* box für statische Bilder  */
.maindiaboxsmallbild {
  width: 80%;
  float: right;
  max-width: 240px; /* gemessen an größe von mainright--> 329px*/
  margin-right: 10%;
  margin-bottom: 0.2em;
  margin-top: 0.6em;}
.maindiaboxtwo {
  width: 80%;
  float: right;
  max-width: 240px; /* gemessen an größe von mainright--> 329px*/
  margin-right: 10%;
  margin-bottom: 0.2em;
  margin-top: 0.6em;}
.bildmain {
  width: 90%; /* gemessen an größe von mainleftbox --> 200px*/
  max-width: 180px;
  margin-left: 5%;}
/* Styles für Text */
/* Textstyles */
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 {font-size: 1em; /* 12,32px */line-height: 1em;}
/*----------------------------------------*/
#footbox small {
  font-size: 1em;}
/* Styles für Footboxen*/
#footbox1, #footbox3, #footbox2 {
  width: 30%;
  margin-left: 2%;
  float: left;
  padding: 0.2em;
  min-height: 30em;
}
#footbox1 h5, #footbox3 h5 {
white-space: normal;
}
/* Styles footbox 2: Informationen */
#footbox2 ul {
  margin-top: 1em;
}
#footbox2 ul li {
  margin-top: 0;
}
li#footkontakt[data-icon]::before, li#footimpressum[data-icon]::before, li#footagb[data-icon]::before, li#footsitemap[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);
  margin-top: -0.6em;}  

/*---------------------------------------------------------------------------*/
/*Styles für Inhalte */
#schnittblumen h4, #topfpflanzen h4, #floristiksaison h4, #floristikhochzeit h4, #floristiktrauer h4, #floristikostern h4, #floristikmuttertag h4, #floristikherbst h4, #floristikallerheiligen h4, #floristikweihnachten h4, #floristikneujahr h4 {
  font-size: 1.2em;
  padding-top: 2em;}
#schnittblumen, #topfpflanzen, #floristiksaison, #floristikhochzeit, #floristiktrauer, h4, #floristikostern, #floristikmuttertag, #floristikherbst, #floristikallerheiligen, #floristikweihnachten, #floristikneujahr {
  width: 8em;
  height: 8em;}
#textagb {
  max-height: 52em;}  
  
/*----------------------------------------------------------------*/
/* Sonstige Styles */  
iframe {
  min-height: 234px;
  max-width: 234px;
  max-width: 240px;
  max-height: 240px;} 
/* Styles für Kontaktformular */
#kontaktformular {
  width: 100%;
  max-width: 500px;}
#kontaktformular small {
  font-size: 1em;}
span.pflichtfeld {
  font-size: 1em;}
blockquote {
   width: 90%;
   max-width: 450px;}
label {
  margin-bottom: 0.2em;}
#vorname, #nachname, #myemail, #betreff, #anliegen {
  margin: 0.4em;
  min-height: 15px;
  padding: 0.2em;
  text-decoration: none;}
input#vorname, input#nachname, input#myemail, input#betreff, textarea#anliegen {
  font-size: 1em;
  width: 80%;
  max-width: 300px;}
#senden, #loeschen, #vorschau {
  font-size: 1.2em;
  margin-top: 3px;
  margin-left: 2px;
  padding: 3px;}
  
  
  
  
  


}


/*----------------------------------------------------------------*/
/*----------------------------------------------------------------*/
/* media Query Styles ab 1024px */
/*---------------------------------------------------------------*/
/*----------------------------------------------------------------*/
@media screen and (min-width: 64em) {
#content {
  font-size: 80%; /* 12,8px--> 1em*/}
/* Styles für topheader */
span#facebooktop[data-icon]::before, span#kontakttop[data-icon]::before, span#phonetop[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 Hauptnavigationspunkte */
#mainnav h1 {
  padding-top: 10px;
  padding-bottom: 5px;
  font-size: 1.2em;}
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 {
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);}
/* Styles für Hauptnavigationspunkte */
li#mainnav1[data-icon]::before {margin-left: 0.5em; margin-right: 0.4em;}
li#mainnav2[data-icon]::before {margin-left: 3.5em; margin-right: 0.4em;}
li#mainnav3[data-icon]::before {margin-left: 2.8em; margin-right: 0.4em;}
li#mainnav4[data-icon]::before {margin-left: 1.8em; margin-right: 0.4em;}
li#mainnav5[data-icon]::before {margin-left: 1em; margin-right: 0.4em;}
li#mainnav6[data-icon]::before {margin-left: 1.6em; margin-right: 0.4em;}
/* Styles footboxen */
#footbox1, #footbox2, #footbox3 {
  padding: 0.5em;}

/*footbox 3: Social media 
li#xing {}
li#linkedin {}
*/
/* Styles für inhalt*/
#maincontent {
  margin-top: 2em;
  margin-bottom: 1em;
  font-size: 1em; /* 12px */
  line-height: 1.2em;}
/*----------------------------------------------------------------------*/
/* container: Ausgabebereite für 100% von max-width 1200px (98% -->1176 )*/
#mainleft {
  width: 20%; /* von--->1200px */
  max-width: 240px;
  margin-bottom: 1em;} 
/* Box mit Border in mainleft*/  
#mainleftbox {
  width: 98%; /* von 240px --> 235px */
  margin-left: 1%;
  margin-right: 0;}
/* container für Text */     
#main {
  width: 50%; /* von--->1200px */
  max-width: 600px; 
  margin-bottom: 0.5em;} 
/* Box mit Border in main*/  
#mainbox {
  width: 98%; /*von 600 --> 588px */
  margin-left: 1%;
  margin-right: 0;}
.maininside {}
/* container für Diabox */  
#mainright {
  width: 30%; /* von--->1200px */
  max-width: 360px;
  margin-bottom: 0.5em;}
/* Box mit Border in mainright*/  
#mainrightbox {
  width: 98%; /*von 360 --> 352*/
  margin-left: 0;
  margin-right: 1%;}
/*-------------------------------------------------------------------*/
/* Boxen für Bilder  für diashows */
.maindiabox {
  width: 80%;
  max-width: 281px; /* gemessen an größe von mainrightbox--> 352px*/
  margin-right: 10%;}
/* box für diashow die neben dann über statischer Bildbox steht */
.maindiaboxsmall {
  width: 80%;
  max-width: 281px; /* gemessen an größe von mainrightbox--> 352px*/
  margin-right: 10%;}
/* box für bild die neben/unter diashow (maindiaboxsmall) steht) */
.maindiaboxsmallbild {
  width: 80%;
  max-width: 281px; /* gemessen an größe von mainrightbox--> 352px*/
  margin-right: 10%;
  margin-top: 1em;}
.maindiaboxtwo {
  width: 80%;
  max-width: 281px; /* gemessen an größe von mainrightbox--> 352px*/
  margin-right: 10%;
  margin-top: 1em;}
.bildmain {
  width: 90%;
  margin-top: 0.5em;
  margin-bottom: 2em;
  max-width: 180px; /* gemessen an größe von mainleftbox--> 200px*/
  margin-left: 5%;}
/*------------------------------------------------------------------------*/
/* Styles footbox 2: Informationen */
li#footkontakt[data-icon]::before, li#footimpressum[data-icon]::before, li#footagb[data-icon]::before, li#footsitemap[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);
  margin-top: -0.7em;}      
/* Styles für Text */
/* sonstige Styles */
iframe {
  min-width: 240px;
  min-height: 240px;
  max-width: 281px;
  max-height: 281px;} 
/*----------------------------------------------------------------*/
/* ---------STYLES UND INHALTE DER EINZELNEN DIABOXEN + BILDBESCHREIBUNG */
/* Styles Animation Bildbeschreibung "Fade-animation 20 Bilder" */
.bilderfade20, .bilderfade15, .bilderslide10, .bilderslide15, .bilderslide5 {
  min-height: 22em; }
  

}




/* 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;}
#angebot {
  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;
}