@charset "utf-8";
/* Einfache fließende Medien
   Hinweis: Für fließende Medien müssen Sie die Attribute 'height' und 'width' des Medium aus dem HTML-Code entfernen
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video { max-width: 100%; }
/* IE 6 unterstützt keine maximale Breite, verwenden Sie daher eine Standardbreite von 100% */
.ie6 img { width: 100%; }
.gridContainer { margin-left: auto; margin-right: auto; width: 86.45%; padding-left: 2.275%; padding-right: 2.275%; }
#logo { display: none; }
#logomobile { clear: both; float: left; margin-left: 0px; width: 100%; display: block; padding: 10px 0 15px 0; text-align: center; }
#contentfirst { clear: both; float: left; margin-left: 0; width: 100%; display: block; text-shadow: 1px 1px 2px rgba(155, 100, 55); /* Fallback */ text-shadow: 1px 1px 2px rgba(155, 100, 55, 0.5); padding: 10px 0 10px 0; }
#contentfirst h1 { font-size: 120%; text-align: center; color: #6181B6; }
#main { clear: both; float: left; margin-left: 0; width: 100%; display: block; padding: 30px 0 30px 0; }
#menuwrapper { clear: both; float: left; margin-left: 0; width: 100%; display: block; }
#footercontent { clear: both; float: left; margin-left: 0; width: 100%; padding: 10px 0 10px 0; font-size: 85%; color: #A2A2A2; }
#treefirst { clear: both; float: left; margin-left: 0; margin-top: 20px; margin-bottom: 20px; width: 100%; display: block; }
#treesecond { clear: both; float: left; margin-left: 0; margin-top: 20px; margin-bottom: 20px; width: 100%; display: block; }
#treelast { clear: both; float: left; margin-left: 0; margin-top: 20px; margin-bottom: 20px; width: 100%; display: block; }
#treefirst h2, #treesecond h2, #treelast h2 { color: #D05746; font-size: 110%; text-align: center; text-shadow: 1px 1px 1px rgba(155, 100, 55); /* Fallback */ text-shadow: 1px 1px 1px rgba(155, 100, 55, 0.5); }
#treefirst img, #treesecond img, #treelast img, .galerie img {opacity: 1; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; }
#treefirst img:hover, #treesecond img:hover, #treelast img:hover, .galerie img:hover  { opacity: 0.7;}
#content { clear: both; float: left; margin-left: 0; width: 100%; display: block; padding: 15px 0 15px 0; text-align: left; }
#twocolumnfirst { clear: both; float: left; margin-left: 0; width: 100%; display: block; }
#twocolumnlast { clear: both; float: left; margin-left: 0; width: 100%; display: block; }
#twocolumnfirst p, #twocolumnlast p { padding: 10px 0 5px 0; margin: 10px 0 10px 0; border-top: 1px dotted #F1F2F5; }
#twocolumnfirst br, #twocolumnlast br { margin-top: 4px; margin-bottom: 4px; }
#impressfirst { clear: both; float: left; margin-left: 0; width: 100%; display: block; padding: 10px 0 25px 0; }
#impresslast { clear: both; float: left; margin-left: 0; width: 100%; display: block; padding: 10px 0 35px 0; }
#impresslast iframe { display: none; }/*js Fallback*/
#gutschein { clear: both; float: left; margin-left: 0; width: 100%; display: block; padding: 20px 0 40px 0; border-top: 1px dashed #D6D6D6; text-align: center; }
#gutschein img { clear: both; float: left; }

/* Layout für Tablet-PCs: 481 bis 768 px. Erbt Stile vom: Layout für Mobilgeräte. */

@media only screen and (min-width: 481px) {
.gridContainer { width: 90.675%; padding-left: 1.1625%; padding-right: 1.1625%; }
#logo { display: none; }
#logomobile { clear: both; float: left; margin-left: 0; width: 100%; display: block; padding: 10px 0 10px 0; text-align: center; }
#contentfirst { clear: both; float: left; margin-left: 0; width: 100%; display: block; }
#main { clear: both; float: left; margin-left: 0; width: 100%; display: block; padding: 30px 0 30px 0; }
#menuwrapper { clear: both; float: left; margin-left: 0; width: 100%; display: block; }
#footercontent { clear: both; float: left; margin-left: 0; width: 100%; padding: 10px 0 10px 0; }
#treefirst { clear: both; float: left; margin-left: 0; margin-top: 15px; margin-bottom: 15px; width: 100%; display: block; }
#treesecond { clear: both; float: left; margin-left: 0; margin-top: 15px; margin-bottom: 15px; width: 100%; display: block; }
#treelast { clear: both; float: left; margin-left: 0; margin-top: 15px; margin-bottom: 15px; width: 100%; display: block; }
#content { clear: both; float: left; margin-left: 0; width: 100%; display: block; text-align: justify; padding: 15px 0 15px 0; }
#twocolumnfirst { clear: both; float: left; margin-left: 0; width: 100%; display: block; }
#twocolumnlast { clear: both; float: left; margin-left: 0; width: 100%; display: block; }
#impressfirst { clear: both; float: left; margin-left: 0; width: 100%; display: block; padding: 0 0 35px 0; }
#impresslast { clear: both; float: left; margin-left: 0; width: 100%; display: block; padding: 0 0 35px 0; text-align: center; }
#gutschein { clear: both; float: left; margin-left: 0; width: 100%; display: block; text-align: left; }
}

/* Desktoplayout: 769 bis maximal 1232 px.  Erbt Stile von: den Layouts für Mobilgeräte und Tablet-PCs. */

@media only screen and (min-width: 769px) {
.gridContainer { width: 88.5%; max-width: 1050px; padding-left: 0.75%; padding-right: 0.75%; margin: auto; }
#logo { clear: none; float: left; margin-left: 0; width: 23.7288%; display: block; padding: 28px 0 28px 0; }
#logomobile { display: none; }
#contentfirst { clear: both; float: left; margin-left: 0; width: 100%; display: block; padding: 10px 0 10px 0; }
#contentfirst h1 { font-size: 150%; }
#main { clear: both; float: left; margin-left: 0; width: 100%; display: block; padding: 60px 0 60px 0; }
#menuwrapper { clear: none; float: left; margin-left: 1.6949%; width: 74.5762%; display: block; padding: 35px 0 0 0; text-align: left; }
#footercontent { clear: both; float: left; margin-left: 0; width: 100%; display: block; padding: 10px 0 10px 0; color: #999999; font-size: 85%; }

#treefirst { clear: both; float: left; margin-left: 0; margin-top: 15px; margin-bottom: 15px; width: 32.2033%; display: block;opacity: 0; filter: alpha(opacity=100)/*IE789*/; -khtml-opacity: 1/*Linuxbrowser*/; -webkit-opacity: 0; -moz-opacity: 0; -moz-animation: fadeIn ease-in 1; animation: fadeIn ease-in 1; -webkit-animation: fadeIn ease-in 1; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-duration: 0.5s; -moz-animation-duration: 0.5s; animation-duration: 0.5s; animation-delay: 0.1s; -webkit-animation-delay: 0.1s; }

#treesecond { clear: none; float: left; margin-left: 1.6949%; margin-top: 15px; margin-bottom: 15px; width: 32.2033%; display: block;opacity: 0; filter: alpha(opacity=100)/*IE789*/; -khtml-opacity: 1/*Linuxbrowser*/; -webkit-opacity: 0; -moz-opacity: 0; -moz-animation: fadeIn ease-in 1; animation: fadeIn ease-in 1; -webkit-animation: fadeIn ease-in 1; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-duration: 0.5s; -moz-animation-duration: 0.5s; animation-duration: 0.5s; animation-delay: .2s; webkit-animation-delay: 0.2s; }

#treelast { clear: none; float: left; margin-left: 1.6949%; margin-top: 15px; margin-bottom: 15px; width: 32.2033%; display: block;opacity: 0; filter:alpha(opacity=100)/*IE789*/-khtml-opacity: 1;-webkit-opacity: 0; -moz-opacity: 0; -moz-animation: fadeIn ease-in 1; animation: fadeIn ease-in 1; -webkit-animation: fadeIn ease-in 1; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-duration: 0.5s; -moz-animation-duration: 0.5s; animation-duration: 0.5s; animation-delay: .4s; webkit-animation-delay: 0.4s; }

#content { clear: both; float: left; margin-left: 0; width: 100%; display: block; padding: 20px 0 40px 0; text-align: justify; }
#twocolumnfirst { clear: both; float: left; margin-left: 0; width: 49.1525%; display: block; }
#twocolumnlast { clear: none; float: left; margin-left: 1.6949%; width: 49.1525%; display: block; }
#impressfirst { clear: both; float: left; margin-left: 0; width: 40.6779%; display: block; padding: 0 0 15px 0; }
#impresslast { clear: none; float: left; margin-left: 1.6949%; width: 57.6271%; display: block; height: 350px; padding: 0 0 35px 0; }
#gutschein { clear: both; float: left; margin-left: 0; width: 100%; display: block; text-align: left; }
}