@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%;
}

.drei-spalter {
width: 30%;
margin: 0 5% 0 0;
float: left;
}
.mnull {
width: 30%;
margin: 0;
float: left;
}
a.jcemediabox-image {
font-size: 100% !important;
line-height: 150% !important;
}
.zeile {
margin: 0 0 1em 0;
}
div.img_caption {
}
/* Layout für Mobilgeräte: 480 px oder weniger. */

#keyvisual {
  margin-left: auto;
  margin-right: auto;
  width: 98%;
  max-width: 960px;
  height: 196px;
  overflow: hidden;
  vertical-align: middle;
  text-align: center;
}
#keyvisual .random-image {
display: inline-block;
    position: relative;
    right: -50%;
    }
#keyvisual .random-image img {
   position: relative;
    left: -50%;
    width: 960px;
min-width: 960px;
}
#slogan {
  width: 100%;
  background: rgb(196,190,228);
  padding: 1em 0em ;
}
#slogan .custom {
  margin-left: auto;
  margin-right: auto;
  width: 98%;
  max-width: 960px;
}
#slogan .custom p {
  width: 95%;
  padding: 0em 2.5%;
}
.gridContainer {
  margin-left: auto;
  margin-right: auto;
  width: 98%;
  padding-bottom: 2em;
}
#logo {
  clear: both;
  float: left;
  display: block;
  width: 95%;
  margin: 0 2.5%;
}
#navigation {
  clear: both;
  float: left;
  margin: 0.5em 0%;
  width: 100%;
  display: block;
  border-top: 1px rgb(196,190,228) dotted;
  border-bottom: 1px rgb(196,190,228) dotted;
}

#links {
  clear: both;
  float: left;
  margin: 0 0%;
  width: 100%;
  display: block;
}
.item-page, .vbContainer {
margin: 0 2.5%;
}
#rechts {
  clear: both;
  float: left;
  margin: 0 0%;
  padding: 2em 2.5%;
  width: 95%;
  display: block;
}

.contactinfo {
  margin: 0 0 1em 0;

}
.info_image img {
width: 50%;
max-width: 250px;
  margin: 0 0 0.5em 0;
}
#footer {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding: 1em 0;
  overflow: hidden;
}
#footer img {
width: 674px;
}
#metanavigation {
  margin-left: auto;
  margin-right: auto;
  width: 98%;
  padding-bottom: 2em;
  text-align: right;
}

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

@media only screen and (min-width: 641px) {
#keyvisual {
  margin-left: auto;
  margin-right: auto;
  width: 90%;
}
#slogan .custom {
  width: 90%;
}
#slogan .custom p {
  margin-left: auto;
  margin-right: auto;
  width: 86.67%;
  padding: 0em 6.67%;
}
.gridContainer {
  width: 90%;
}
#links {
  clear: both;
  float: left;
  margin: 0 0 0 0%;
  width: 65%;
  display: block;
  border: none;
}
#logo {
  clear: both;
  float: left;
  display: block;
  width: 90%;
  margin: 0 0 0 10%;
  padding: 0;
}
#navigation {
  clear: both;
  float: left;
  width: 100%;
  display: block;
  margin: 0 0 1.5em 0%;
}
.item-page, #phocaguestbook {
margin: 0 10%;
}
#rechts {
  clear: none;
  float: left;
  margin: 0 0 0 0%;
  width: 30%;
  display: block;
}
#footer {
  float: left;
  width: 65%;
  padding: 1em 0%;
}
#metanavigation {
  width: 90%;
}
}

/* 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: 90%;
  max-width: 960px;
  margin: auto;
  padding-top 20px;
}
#logo {
  clear: both;
  float: left;
  display: block;
}
#navigation {
  clear: both;
  float: left;
  width: 100%;
  display: block;
}
#links {
  clear: both;
  float: left;
  width: 70%;
  display: block;
  border: none;
}
#rechts {
  clear: none;
  float: left;
  width: 25%;
  display: block;
}
#footer {
  width: 70%;
}
#metanavigation {
  width: 90%;
  max-width: 960px;
  margin: auto;
}
}

@media only screen and (min-width: 1024px) {

body {

}

}
@media only screen and (min-width: 1500px) {

body {

}

}