/*

Verfügbare Platzhalter: 
#649e66
#fff
#f0f1f2
#666c71
#959595
#cecece
#ffffff
#ffffff

*/

/*Allgemeine Seiten-Elemente*/
html, body {
	margin: 0;
	padding: 0;
}

body {
	color: #666c71;
    font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
}


a {
	color: #959595;
    text-decoration: none;
}
a:visited {
	color: #959595;
    text-decoration: none;
}
a:hover {
	color: #cecece;
    text-decoration: underline;
}
a:focus {
	color: #cecece;
    text-decoration: none;
}


/****************************************************************/
/*     nützliche Klassen, die immer wieder mal vorkommen        */
/****************************************************************/

.jDialog { 
    display:none; 
}

.clear { 
    clear: both;  
    width: 0px; 
    height: 0px;}

/*Wenn der Seiteninhalt keine Containergrenzen, sondern über den gesamten Bildschirm gehen soll*/
.fullsize {
	width: 100%;
}


/****************************************************************/
/*       Allgemeine Elemente für Bootstrap                      */
/****************************************************************/

/*verborgener Schalter, der nur bei besonderen Displays eingeblendet wird.*/
#skipnav a {
  padding: 6px;
  position: absolute;
  top: -40px;
  left: 0px;
  color: white;
  border-right: 1px solid white;
  border-bottom: 1px solid white;
  border-bottom-right-radius: 8px;
  background: transparent;
  transition: top 1s ease-out, background 1s linear;
  z-index: 2000;
}

#skipnav a:focus {
  position: absolute;
  left: 0px;
  top: 0px;
  background: #18BC9C;
  outline: 0;
  transition: top 0.1s ease-in, background 0.5s linear;
}
/*div#maincontent {

}*/

/*Die Seite verwendet einen unsichtbaren Container, der einheitlich die Breite des Seiteninhalts darstellt*/
.container {
    /*wird in Bootstrap definiert je nach Fenstergröße*/

}

.container.unterseite {
    min-height: 500px;
    outline: none;
}


/*****************************  HEADER   ****************************/

/*############################  PRE-HEADER  ########################*/
/*Der Header beginnt mit einer Zeile, die einen kurzen Kontaktblock enthält*/

.index{
    /*background-image: url('img/content/bg.jpg');
    background-repeat: no-repeat;
    background-position: left center;
    background-color: none;
    background-size: cover;*/
}

#Seitenbereich{
    margin: 0 auto;
    padding: 0px;
    box-shadow: gray 5px 5px 5px;
    margin-bottom: 20px;
    border-left: solid 1px #f0f1f2;
    background-color: white;
}

#PreHeader {
   text-decoration: none; 
  
   height: 30px;
   position: fixed;
   width: 100%;
   top: 0px !important;
   z-index: 1031;
   overflow: hidden;
   font-size: 12px;
 }

.preheaderzeile {
   background-color:#649e66;
   height: 30px;
   margin-top: 0px;
   padding-top: 5px;
}


/*linksbündig: Impressum und Datenschutz*/
#PreHeader .btnImpressum a, #PreHeader .btnDatenschutz a{
    display: block;
    font-size: 12px;
    margin-left: 10px;
    text-decoration: underline;
    color: #fff;
}


#PreHeader .btnImpressum a.left, #PreHeader .btnDatenschutz a.left {
    float: left;
}

#PreHeader .btnImpressum a.right, #PreHeader .btnDatenschutz a.right {
    float: right;
}

#PreHeader .nav li a:hover, #PreHeader .nav li a:focus {
    background-color: #959595;
}

#PreHeader .loginstatuscontrol {
    margin-left: 10px;
}

#PreHeader .imgLnkBearbeiten, #PreHeader .imgLnkAdminbereich, #PreHeader .imgLnkReloadCSSFromSYS, #PreHeader .imgLnkLogs, #PreHeader .imgLnkCookie {
    /*float: right;
    margin-left: 10px;*/
    padding-left: 3px;
    padding-right: 3px;
}

.cookie-consent {
    background-color: aliceblue; /*beige*/
    opacity: 0.8;
    color: #555;
}

    .cookie-consent div {
        height: 10px;
    }

    .cookie-consent a:hover, .cookie-consent a:active, .cookie-consent a:focus {
        color: #8b8b8b;
    }

    .cookie-consent #consent {
        color: #000;
    }

@media (max-width: 767px) {
    .cookie-consent {
        font-size: 8px;
    }
}

.adminlinkbar {
    padding-left: 5px;
    padding-right: 5px;
    background-color: #e5e5e5;
    border: solid 1px #363636;
    /*float: right;
    margin-left: 10px;*/
    height: 20px;
    position: fixed;
    top: 5px;
    right: 10px;
    z-index: 9999;
    width: 120px;
}




/*Telefon, Mail und Kontaktbutton, sofern genug Platz ist. */
.email {
    padding-left: 0px;
    text-align: right;
    padding-right: 0px;
    display: inline;
    float: left;
    text-decoration: none;
    margin-right: 10px;
}

.email img {
    padding-left: 0px;
    padding-right: 6px;
    padding-bottom: 3px;
}

.phone, .smartphone {
    padding-right: 0px;
    text-align: right;
    float: left;
    margin-right: 10px;
}

/*es wird zwischen hellen und dunklen Icons unterschieden. Helle Icons sind auf dunklem Hintergrund*/
.email.hell, .phone.hell, .smartphone.hell {
    color: #fff;
}

/*Dunkle Icons sind auf hellem Hintergrund*/
.email.dunkel, .phone.dunkel, .smartphone.dunkel {
    /*Standard-Link-Farben*/
}


#Kontaktbutton {
    color: #fff;
    padding-right: 10px;
    text-align: right;
    padding-right: 15px;
    display: inline;
    float: left;

}

#Kontaktbutton a {
    color: #fff;
    text-decoration: underline; 
}

#Kontaktbutton .lnklogin {
    margin-left: 10px;
}


/*Mobilansicht: */
@media (max-width: 767px) {
    /*Nur Mail und Kontaktbutton*/

    .email .emailtext {
    visibility: hidden;
    display: none;    
    }

    .email img {
        padding-left: 0px;
        padding-right: 5px;
    }

    #Kontaktbutton {
        padding-left: 5px !important;
    }

    #kontaktblock .titel {
        font-size: 14px !important;
        font-weight: 500 !important;
        padding-left: 5px;
    }

    .phone {
        visibility: hidden;
        display: none;
    }

    .smartphone {
        visibility: hidden;
        display: none;
    }
    .loginstatuscontrol {
        visibility: hidden;
        display: none;
    }
	
	.Firmentext {
		display: table-cell;
	}
	
}

/*Tablets: alles*/
@media (min-width: 768px){

    .email .emailtext {
        visibility: visible;
        display: inline;    
    }

    .phone {
        visibility: visible;
        display: inline;
    }

    .smartphone {
        visibility: visible;
        display: inline;
    }
}

#PreHeader ul, #PreHeader ul li, #PreHeader ul li a {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
	color: #fff;
}


/*Falls gewünscht, wird unter der Kontakt-Zeile ein Pfeil nach unten gezeichnet*/
#PreHeader .Pfeilrow {
    visibility: hidden;
    display: none;
}

/*#PreHeader .Pfeilrow {
    margin: auto;
    position: fixed;
    top: 30px;
    text-align: center;

}

#PreHeader .pfeilLi{
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 35px solid #d8cc76;
    border-left: 35px solid transparent;
    border-bottom: 35px solid transparent;
}

#PreHeader .pfeilRe{
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 35px solid #d8cc76;
    border-right: 35px solid transparent;
    border-bottom: 35px solid transparent;
}*/


/*############################  MainHeader  ########################*/  


/*eingebettet ist der Hauptteil des Headers in folgende CSS-Klassen:
    navbar 
    navbar-default 
    navbar-fixed-top 
    navbar-custom
*/



.mainHead, #mainNav {
    background-color: white !important;
    border-color: #fff !important;
    right: auto !important;
    left: auto !important;
}

/*Hier sind zwei Container-Elemente ineinander verschachtelt. Beide benötigen die Überschreibung der Padding-Eigenschaften*/
#mainNav.container, .navbar .mainHead .container, .navbar .mainHead.container{
    padding-left: 0px !important;
    padding-right: 0px !important;
    width: 100%;
}


.navbar-default {
    
    margin-bottom: 0px !important;
    
}
.navbar-fixed-top {
    /*top: 30px !important;*/
}




.mainHead {
    
}


/*  Ein effekt: Wenn die erste Section erreicht wird, wird der Header etwas kleiner
    Voraussetzung ist, dass das Padding-Top vorher mehr als 0px war. 
    Nachher greift die .affix-Endung und reduziert das padding wieder auf 0px
    Ausgenommen ist die Handy-Ansicht von dem Effekt
*/
@media (min-width: 768px) {
    
    .navbar-custom {
        /*padding: 10px 0;*/
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom: 10px;
        padding-left: 0px;
    }

    .navbar-custom.affix {
        padding: 0px 0;
    }
}


/*Das ist der eigentliche Header. Hier kann ein Hintergrundbild platziert werden, je nach Größe*/
@media (max-width: 767px) {
    .navbar .container{
        background-image:none;
        height: 80px;
    }
}

@media (min-width: 767px) {
    .navbar .mainHeadMiddle{
        background-position: right top;
        background-repeat: no-repeat;
        height: 120px;
    }       
}


/*  innerhalb des Headers gibt es verschiedene Elemente. 
    Ganz rechts steht das Logo, genannt navbar-brand

*/

.navbar-header .navbar-brand{

    margin-left: 0px !important;
    margin-right: 10px;
    padding: 0px 0px !important;
    display: block;

    background-repeat: no-repeat;
    background-position: left center;
    background-color: none;
    background-size: cover;
}

/*  Je nach Screen-Größe kann man das Logo unterschiedlich groß machen*/
@media (max-width: 767px) {
    /*in der Handyansicht muss die Höhe des Headers angepasst werden, da die Menüleiste darunter fehlt.*/
    .navbar-header{
        height: 100px;
    }

    .navbar-header .navbar-brand {
        height: 60px;
        /*width: 60px;*/
         width: auto;
    }
}

@media (min-width: 768px) {
    .navbar-header{
        height: 100px;
    }

    .navbar-header .navbar-brand {
        height: 80px;
        /*width: 80px;*/
         width: auto;
    }
}

@media (min-width: 992px) {
     .navbar-header{
        height: 120px;
    }

    .navbar-header .navbar-brand {
        height: 110px;
        /*width: 110px;*/
        width: auto;
    }
}

/*Rechts neben dem Brand (Logo) schließt der Firmenname an*/

.Firmenname {
	font-weight: 500;
	text-shadow: #4d4d4d 2px 2px 5px;
}

/*Für jede Ansicht ist die Schriftgröße etwas unterschiedlich*/
@media (max-width: 767px) {
    .Firmenname {
        letter-spacing: 1px;
        font-size: 16px;
        color: #363636;
        width: auto;
        margin-top: 8px;
    }

    .Firmentext {
        margin-top: 5px;
        font-size: 12px;
        color: #8b8b8b;
    }
}

@media (min-width: 768px) {
    .Firmenname {
        letter-spacing: 2px;
        font-size: 20px;
        color: #363636;
        width: auto;
        /*min-width: 500px;*/
    }

    .Firmentext {
        font-size: 16px;
        color: #8b8b8b;
    }
}

@media (min-width: 992px) {
    .Firmenname {
        letter-spacing: 4px;
        font-size: 28px;
        color: #363636;
        width: 650px
    }

    .Firmentext {
        font-size: 20px;
        color: #8b8b8b;
    }
}


@media (min-width: 1200px) {
.Firmenname {
        letter-spacing: 4px;
        font-size: 30px;
        color: #363636;
        width: 800px
    }

    .Firmentext {
        font-size: 20px;
        color: #8b8b8b;
    }
}

/*############################  Menüleiste  ########################*/  
/*Im nächsten Schritt folgt die Menüleiste*/
.Menuleiste{
    letter-spacing: 1px;
}

/*In der Handyansicht gibt es keine Menüleiste, sondern das kleine Toggle-Menü.*/
@media (max-width: 767px) {
    
    /*Der Menü-Bereich. Hier kann man einen Box-Shadow setzen, um ihn zum Content abzugrenzen*/
     #mainNav{
        box-shadow: 0px 5px 5px silver;
    }

    /*   Das hier ist in dem Fall die Höhe des Headers. Ist etwas kleiner in der Ansicht, damit das
        aufgeklappte Menü etwas näher an den Menübutton herankommt.
    */
    .navbar-header{
        height: 60px;
        padding-left: 15px;
    }

    /*Das muss hier deaktiviert werden, damit das andere Menü Platz findet. Diese option wird in der Standard-Ansicht genutzt*/
    .navbar .container{
        height: unset !important;
    }

    /*Ab hier beginnt der Content. Den Menübereich aussparen. 60px navbar-header + 30 px PreHeader + 10px Schatten*/
    #page-top{
       height: 100px !important;
    }


    /*  Das hier ist der kleine Menü-Button oben rechts für das Menp, welches in der Handyansicht nur minimiert
        erscheint. In dem Fall wird nämlich der navbar-toggle-Button mit float right eingeblendet.
    */
    .navbar-custom .navbar-toggle {
      color: white;
      text-transform: uppercase;
      font-size: 10px;
      border-color: white;
      background-color: #ddd !important; /*ddd*/
    }
    .navbar-custom .navbar-toggle:hover,
    .navbar-custom .navbar-toggle:focus {
      background-color: #d8cc76; /*#f8f8f8*/
      color: gray;
      border-color: gray;
    }

    /*Das Menü-Div*/
    .Menuleiste{
        width: 90%;
        /*box-shadow: silver 2px 2px 2px;*/
        display: block;
        margin: auto;
        /*margin-bottom: 10px;*/
        border-left: #f0f1f2 1px silver;
    }

    /*Element innerhalb der Menüleiste, welches dann die einzelnen Menü-Bottons aufnimmt.*/
    .navbar-nav{
        margin-top: 0px !important;
    }

    /*Noch ein element innerhalb navbar-nav, wo man die Hintergrundfarbe des Menüs setzen kann*/
    .navbar-collapse {
        background-color: #fff;
        color: #ddd;
    }

    /*Der normale Menü-Button*/
    .navbar-default .navbar-nav > li > a{
         color: #777 !important;
        background-color: transparent;
    }

    /*Der aktive Menü-Button*/
    .navbar-default .navbar-nav > .active > a {
        color: #555 !important;
        background-color: #e7e7e7 !important;
    }

    /*Der Hover-Menü-Button*/
    .navbar-default .navbar-nav > li > a:hover {
        color: #555 !important;
        background-color: #f0f1f2 !important;
    }

	.Firmenname img {
		width: 150px;
	}
	
	.Firmentext {
		margin-left: 50px;
		display: block;
	}

   


}

/*Hier gibt es eine Menüleiste unter dem Header-Bereich*/
@media (min-width: 768px) {

    /*Ab hier beginnt die eigentliche Webseite, das heißt das ist der Abstand, den der Header braucht*/
    #page-top{
        height: 192px;
        visibility: hidden;
    }

    /*-- Präsentationsleiste oben --*/
    .Menuleiste {

        font-family: 'HelveticaNeue-Bold','Helvetica Neue','Arial',sans-serif;
        font-size: 12px;
        font-weight: 600;
        line-height: 23px; 
  
        background-image: url('../../img/theme/gruen/menuHG.jpg');
        height: 30px;
 
        width: 100%;
        background-position: center center;
        background-repeat: repeat-x;
        box-shadow: 0px 5px 5px silver;
        padding: 0px; 
    }

    /*Hier aufpassen, .container hat oben das Hintergrundbild des Standard-Headers.*/
    .Menuleiste .container{
        background-image: none !important;
        height: unset !important;
    }

    .navbar-header {
        width: 800px !important;
        
    }

    #naviblock li a {
        text-decoration: none;
        color: #ffffff;
        /*text-transform: uppercase;*/

        padding-left: 8px;
        padding-right: 8px;

        padding-top: 5px;
        display: block;
        float:left;
        height: 30px;
    }

    #naviblock li a:hover {
        background-image  : url('../../img/theme/gruen/menuAktiv.jpg');
	    background-position: center center;
	    background-repeat:   repeat;
    }


    /*Der Menübutton der aktuellen Content-Seite*/
    #naviblock .akt
    {
        color: #ffffff;
        background-image  : url('../../img/theme/gruen/menuAktiv.jpg');
	    background-repeat:   repeat;
        background-position: center center;
    }     
           
    /*Das hier ist das Menü-Item auf der Startseite, welches gerade aktiv ist, d.h. wohin gerade gescrollt ist im OnePager*/
    /*Normalansicht*/
    .navbar-custom .navbar-nav li.active a {
        background-image: url('../../img/theme/gruen/menuAktiv.jpg');
        background-repeat: repeat;
        background-position: center center;
    }

    /*Hover pp.*/
    .navbar-custom .navbar-nav li.active a:hover,
    .navbar-custom .navbar-nav li.active a:focus,
    .navbar-custom .navbar-nav li.active a:active {
        background-image: url('../../img/theme/gruen/menuAktiv.jpg');
        background-repeat: repeat;
        background-position: center center;
    }

	#naviblock li a {
	    padding-left: 5px;
        padding-right: 5px;
	}
	
	.Firmentext {
		margin-left: 50px;
	}


}

/*Ab dieser Bildschirmgröße dürfen die Menübuttons etwas größer sein*/
@media (min-width: 992px) {

    .Menuleiste {
        font-family: 'HelveticaNeue-Bold','Helvetica Neue','Arial',sans-serif;
        font-size: 13px;
    }

    #naviblock li a {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/*Und hier ganz groß*/
@media (min-width: 1200px) {

    .Menuleiste {
        font-family: 'HelveticaNeue-Bold','Helvetica Neue','Arial',sans-serif;
        font-size: 14px;
    }

    #naviblock li a {
        padding-left: 25px;
        padding-right: 25px;
    }
}


/*############################  Header mit Bigslider  ########################*/

/*Das ist ein referenzpunkt, der den unteren Punkt des menüs kennzeichnet*/
#page-top {
    visibility: hidden;
}

/*erster Block im Onepager, das Element heißt Header. Gemeint ist die Startseite*/

header {
  text-align: center;
  background: #fff;
  color: #000;
  margin-top: 20px;
}

/*Der header besteht weitestgehend aus einem Bigslider mit darunter liegendem Schatten*/

/*Der Bigslider liegt in einem Div mit der id "Bild". */
#Bild .container {
    padding-bottom: 0px !important;
    padding-top: 0px !important;
    /*wenn hier width=100% steht, spannt das Bild über die gesamte Breite*/
    /*width: 100% !important;*/   
}

#Bild, #wowslider-container1 {
    line-height: 0px;
    margin: 0px !important;
    
}


/*++++++++++++++  Den Bigslider selbst konfigurieren ++++++++++++++++++++++++*/

/*die Größe der Miniaturen im Wowslider muss je nach Format angepasst werden!*/
#wowslider-container1 .ws_bulframe div div
{
    /*height: 21px !important;
    width: 42px !important;*/
}

    #wowslider-container1 .ws_bulframe div {
        /*in der style.css der engine anpassen, nicht hietr!! Zeile 941

            format startseite 1500x750: width 90px
            format Unterseite 1500x1000 width 72px
        width: 72px !important;*/

    }

/*Die Controls der Mini-Slideshow ausblenden*/
.slideshow a#vlb{
    display:none
}

/*Die Titel-Box, die im Wowslider bei bildern eingeblendet werden kann.*/
#wowslider-container1 .ws-title div {
    line-height: 18px !important;
}


/*Der Titel-Text der im Wowslider eingeblendeten Textbox (Zeile1)*/
#Bild .container h1 {
    position: relative !important;
    
    color: white !important;
    text-align: left !important;
    z-index: 999 !important;
    
    padding: 0 !important;
    
    margin: 0 !important;

}

/*Der Description-Text der im Wowslider eingeblendeten Textbox (Zeile2)*/
#Bild .container h2 {
    color: white !important;
    text-align: left !important;
    z-index: 999 !important;
    margin: 0 !important;
    position: relative;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/




/*+++++++++++++++++  Der Schatten unter dem Bigslider  +++++++++++++++++*/
#wowslider-container1 .ws_shadow {
    height:50px;
    background-image: url('img/content/schatten.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
}

/*Die Schattengröße muss je nach Bildschirmauflösung skaliert werden*/


@media (min-width: 993px) {
   
    #wowslider-container1 .ws_shadow {
        height: 50px;
    }
}

@media (max-width: 992px) {
   
    #wowslider-container1 .ws_shadow {
        height: 30px;
    }
}

@media (max-width: 768px) {
   
    #wowslider-container1 .ws_shadow {
        height: 30px;
    }
}

@media (max-width: 600px) {
    
    #wowslider-container1 .ws_shadow {
        height: 20px;
    }
}

@media (max-width: 400px) {
   
    #wowslider-container1 .ws_shadow {
        height: 15px;
    }
}

@media (max-width: 200px) {
   
    #wowslider-container1 .ws_shadow {
        height: 10px;
    }
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


/*######################################################################*/

/*###############################  Fußzeile  ###########################*/

/*Der gesamte Footer-Bereich*/
#footer {
    color :#ffffff;
    text-align: left;
    margin-top: 0px;
    background-color: #737373;
    letter-spacing: normal; 

    /*falls ein Pfeil nach unten angezeigt werden soll*/
    padding-top: 25px;
}

#footer a, footer a:hover, footer a:visited, footer a:focus, footer a:active{
    color: #ffffff;
    font-size: 14px;
}

#footer h2 {
    margin-bottom: 10px;
    font-size: 20px;
    border-bottom: solid 1px silver;
}

/*Der Footer ist in drei Spalten aufgeteilt*/


/*++++++++++++++++++++++++++ Inhalte linke Spalte ++++++++++++++++++++++++*/
/*Links gibt es eine Navigation mit allen Seiten*/
#footer .links{
    float: left;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 0px;
    width: 30%;
    margin-right: 20px;
    min-height: 150px;
    min-width: 300px;
}


#footer .links ul{
    margin-left: 0px !important;
    padding-left: 0px !important;
    margin-top: 28px !important;
}

#footer .links li{
    list-style: none;
    padding-top: 2px
}



/*++++++++++++++++++++++++++ Inhalte mittlere Spalte ++++++++++++++++++++++++*/
/*Hier ein Kontaktformular*/
#footer .mitte {
    float: left;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 30%;
    margin-right: 20px;
    min-height: 150px;
    min-width: 300px;
    }

#footer .mitte .form input {
    width: 254px;
    height: 40px;
    background-color: #c5c5c5;
    border: solid 1px #313131;
    color: black;
}

#footer .mitte .form textarea {
    background-color: #c5c5c5;
    border: solid 1px #313131;
    margin-bottom: 5px;
    width: 254px;
    color: black;
}

#footer .mitte .form #btnsenden {
    width: 254px;
    color: #fff;
    background-color: #8b8b8b;
    border: solid 1px #8b8b8b;
}


/*++++++++++++++++++++++++++ Inhalte rechte Spalte ++++++++++++++++++++++++*/
/*Hier Kontaktdaten und QR-Code*/
#footer .rechts {
    float: left;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-right: 10px;
    width: 30%;
    min-height: 150px;
    min-width: 300px;
}

/*zweispaltige Ansicht*/
@media (min-width: 680px) {
    #footer .rechts {
        min-width: 620px;
    }
}

@media (min-width: 980px) {
    #footer .rechts {
        min-width: 300px;
    }
}

/*Bei den Telefonnummern für eine gleichmäßige Einrückung sorgen*/
#footer .rechts .left .tel, #footer .rechts .left .fax, #footer .rechts .left .mobiltel {
    display: block;
    float: left;
    width: 60px;
    
}

#footer .rechts .socialNetwork {
    margin-top: 15px;
    margin-bottom: 15px;
}

#footer .rechts  .socialNetwork a {
    float:left;
    margin-right: 5px;
}

#footer .rechts  .socialNetwork a img {
    margin-left: 5px;
}

/*#footer .rechts .socialNetwork .lnkfacebook  {
    visibility: visible;
    display: block;
}

#footer .rechts .socialNetwork .lnkxing  {
    visibility: hidden;
    display: none;
}

#footer .rechts .socialNetwork .lnktwitter  {
    visibility: hidden;
    display: none;
}

#footer .rechts .socialNetwork .lnkinstagram  {
    visibility: hidden;
    display: none;
}

#footer .rechts .socialNetwork .lnkgoogleplus  {
    visibility: hidden;
    display: none;
}

#footer .rechts .socialNetwork .lnkyoutube  {
    visibility: hidden;
    display: none;
}

#footer .rechts .socialNetwork .lnklinkedin  {
    visibility: hidden;
    display: none;
}*/

#footer .qr{
    margin-top: 20px;
    height: 150px;
    width: 150px;
    display: block;
}

/*Einige Seiten haben eine PDF-Broschüre*/
#footer .rechts .PDF_Broschuere {
    margin-top: 25px;
    visibility: hidden;
    display: none;
}

#footer .rechts .PDF_Broschuere .imagelink {
   display: block;
   float: left;
}

#footer .rechts .PDF_Broschuere .imagelink img {
   margin-right: 5px;
   margin-top: 8px;
}

#footer .rechts .PDF_Broschuere .h2textlink {
    display: block;
    line-height: 36px;
    vertical-align: bottom;
    border: none;
}


/*######################################################################*/

/*###############################  SubFooter  ##########################*/


#subfooter {
    color :#ffffff;
    text-align: left;
    min-height:30px;
    margin-top: 0px;
    background-color: #313131;
    letter-spacing: normal; 
}

#subfooter a, #subfooter a:hover, #subfooter a:visited, #subfooter a:active, #subfooter a:focus{
    color: white;
}

/*grundsätzlich drei gleichbreite Parts wie im Footer*/
#subfooter .links, #subfooter .mitte, #subfooter .rechts {
    float: left;
    padding-top: 5px;
    padding-bottom: 5px;

}

/*größere Ansicht, alle drei Parts sind möglich*/
@media (min-width: 680px) {
   #subfooter .links, #subfooter .mitte, #subfooter .rechts {
    width: 30%;
    }
}

/*schmalere Ansicht, einen Part ausblenden, um mehr Platz zu haben.*/
@media (max-width: 680px) {
    #subfooter .links, #subfooter .rechts {
        width: 45%;
    }

    #subfooter .mitte {
        visibility: hidden;
        display: none,
    }
}

/*ganz klein: untereinander darstellen*/
@media (max-width: 400px) {
     #subfooter .links, #subfooter .rechts {
        width: 100%;
        float: none;
        text-align: left !important;
    }


}
/*Rechter Part mit Impressum- und Datenschutz-Link*/
#subfooter .rechts {
    text-align: right;
}


/*######################################################################*/

/*############################## Admin-Links  ##########################*/

.Adminlinks.off{
    visibility: hidden !important;
    display: none !important;
}

.Adminlinks.on, .Adminlinks
{
    text-align: center;
    visibility: visible;
    display: block;
}

.Adminlinks a
{
    margin-left: 15px;
    color: silver;
    }

.Adminlinks a:hover
{
    color: gray;
}


/*Für Bibliotheken: Admin-Link zum Bearbeiten eines Eintrags*/
.BibNeu{
    text-align: center;
    display: block;
    clear: both;
}


/*######################################################################*/






/*############### Elemente Masterpage für Content  #####################*/

/*Boden-Abstand*/
#IFR_contentPlace
{
    padding: 0px;
    margin: 0px;
}

/*Korrektur Bootstrap*/
.checkbox {
    padding-left: 0px !important;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"] {
    max-width: 280px;
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .jumbotron {
        margin-top: 20px;
    }

    .body-content {
        padding: 0;
    }
}


/* SLIMBOX */

#lbOverlay {
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	/*background-color: #000;*/
	cursor: pointer;
}

#lbCenter, #lbBottomContainer {
	position: absolute;
	z-index: 9999;
	overflow: hidden;
	background-color: #fff;
}

.lbLoading {
	background: #fff url(img/slimbox/loading.gif) no-repeat center;
}

#lbImage {
	position: absolute;
	left: 0;
	top: 0;
	border: 10px solid #fff;
	background-repeat: no-repeat;
}

#lbPrevLink, #lbNextLink {
	display: block;
	position: absolute;
	top: 0;
	width: 50%;
	outline: none;
}

#lbPrevLink {
	left: 0;
}

#lbPrevLink:hover {
	background: transparent url(img/slimbox/prevlabel.gif) no-repeat 0 15%;
}

#lbNextLink {
	right: 0;
}

#lbNextLink:hover {
	background: transparent url(img/slimbox/nextlabel.gif) no-repeat 100% 15%;
}

#lbBottom {
	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
	font-size: 10px;
	color: #666;
	line-height: 1.4em;
	text-align: left;
	border: 10px solid #fff;
	border-top-style: none;
}

#lbCloseLink {
	display: block;
	float: right;
	width: 66px;
	height: 22px;
	background: transparent url(img/slimbox/closelabel.gif) no-repeat center;
	margin: 5px 0;
	outline: none;
}

#lbCaption, #lbNumber {
	margin-right: 71px;
}

#lbCaption {
	font-weight: bold;
}


    /*****************************************************************************/
    /* Carousel */   
    
  .clcontainer {min-height: 80px;  width:700px;  margin-top: 0px;}
	.clcontainer h2, .clcontainer h3, .clcontainer pre{clear:both;}
	.clcontainer .carousel,
	.clcontainer .carousel .carousel-wrap{border:0; text-align: left;}
	.clcontainer .carousel.js .carousel-wrap{height: 110px;width:610px;float:left;margin:0 10px 10px/*border:1px solid #d3d3d3*/;background: transparent;/*#f4f4f4;*/}
	.clcontainer .carousel ul{margin:0;padding:0;}
	.clcontainer .carousel.js ul li{display:inline;float:left;padding:2px 0px 0px 0px; width:100px ;  text-align:center}
	.clcontainer .carousel .carousel-control{display:inline;float:left;margin:15px 0px 0 0;padding:5px 0px;font-weight:bold;font-size:11px;cursor:pointer;background:#ddd;}
	.clcontainer .carousel .disabled{color:#ddd;cursor:default;background:transparent;}
	.clcontainer .carousel div{margin:0;padding:0;border:0;}
	.clcontainer div.center-wrap{clear:both;border:0;}
	.clcontainer div.center-wrap div{border:0;}
	.clcontainer div.center-wrap a{margin:0 2px;padding:0 5px;border:1px solid #d3d3d3;background:#f4f4f4;cursor:pointer;}
	.clcontainer div.center-wrap a.active{background:#ddd;}


    /*****************************************************************************/
    /* ArrowListMenu */   
	.arrowlistmenu{
	width: 180px; /*width of accordion menu*/
	}

	.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
	font: bold 14px Arial;
	color: white;
	background: black url(titlebar.png) repeat-x center left;
	margin-bottom: 10px; /*bottom spacing between header and rest of content*/
	text-transform: uppercase;
	padding: 4px 0 4px 10px; /*header text is indented 10px*/
	cursor: pointer;
	}

	.arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
	background-image: url(titlebar-active.png);
	}

	.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
	list-style-type: none;
	margin: 0;
	padding: 0;
	margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
	}

	.arrowlistmenu ul li{
	padding-bottom: 2px; /*bottom spacing between menu items*/
	}

	.arrowlistmenu ul li a{
	color: #A70303;
	background: url(arrowbullet.png) no-repeat center left; /*custom bullet list image*/
	display: block;
	padding: 2px 0;
	padding-left: 19px; /*link text is indented 19px*/
	text-decoration: none;
	font-weight: bold;
	border-bottom: 1px solid #dadada;
	font-size: 90%;
	}

	.arrowlistmenu ul li a:visited{
	color: #A70303;
	}

	.arrowlistmenu ul li a:hover{ /*hover state CSS*/
	color: #A70303;
	background-color: #F3F3F3;
	}



/**********************************************************************/
/********* Content**************************************/
/**********************************************************************/



/*Textbereich der Content-Seite*/
.contenttext {

    margin-top: 20px;
    margin-right: 10px;
    margin-bottom: 50px;
    text-align: justify;

}

/******************* Startseite ******************************/
 


.facebookKachel{
    min-height: 840px;
    float: left;
}

.facebookKachel .BibEintrag{
    height: 820px !important;
}

.facebookKachel .Eintrag{
    padding-right: 0px;
    margin-right: 0px;
    height: 830px;
}

.facebookKachel .Klammer{
    margin-top: 15px;
    margin-bottom: 10px;
    padding-left: 0px;
    padding-right: 0px;
    margin-left: 0px;
    margin-right: 0px;
    min-height: 788px;
}

.facebookKachel .Txt{
    padding-left: 0px;
    padding-right: 0px;
    margin-left: 0px;
    margin-right: 0px;
}



.weiter a {
	color: #ffffff;
}
.weiter a:visited {
	color: #ffffff;
}
.weiter a:hover {
	color: #e5e5e5;
}

#video {
    width: 615px;
}

#video img {
    width: 615px;
    height: auto;
}

.textlink {
    color: #000000;
    
}

.textlink:visited {
    color: #000000;
}

.textlink:hover {
    color:gray;
}

.h2textlink {
    display: inline;
}

.h2textlink a {
    margin-top: 2px;
    display: inline-block;
    vertical-align: top;
}

.imagelink {
    display: inline;
}

.Hinweisbox {
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 10px;
    margin-top: 20px;
    padding: 15px;
    background-color: #d5d5d5;

    /*font-size: 16px;
    font-family: 'Times New Roman', Times, serif;*/
     text-align: justify;
     font-weight: 500;
     color: #000000/*313131*/;
}




/*Bild-Box Leiste rechts*/
.BildboxRandleiste {
    display: block;
    width: 260px;
    padding: 20px;
    text-align: left;
    margin-bottom: 20px;
    border: dashed 1px #e5e5e5;
    font-size: 14px;
}

.BildboxRandleiste_Bild {
    padding: 10px;
    margin-bottom: 10px;
    background-color: #e5e5e5;
    line-height: 22px;
}

.BildboxRandleiste_Person {
    font-weight: bold;
    color: #39393a;
}

.BildboxRandleiste_Position {
    color: #313131;
}

.BildboxRandleiste .gross {
    visibility: visible;
    display: block;
}

.BildboxRandleiste .klein {
    visibility: hidden;
    display: none;
}

/*Zitatbox*/
.Zitat {
    display: block;
    width: 260px;
    padding: 20px;
    text-align: left;
    margin-bottom: 20px;
    border: dashed 1px #e5e5e5;
    font-size: 14px;
}

.Wortlaut {
    /*font-family: 'Times New Roman', Times, serif;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;*/
    font-size: 16px;
    color: black;
    text-align: center;
    padding: 10px;
    margin-bottom: 15px;
    /*border: solid 1px #313131;*/
    background-color: #e5e5e5;
    line-height: 22px;
}

.quot {
    font-weight: bolder;
    font-size: 22px;
    font-family:  Georgia, 'Times New Roman', Times, serif;
    margin-right: 5px;
    margin-left: 5px;
}

.Person {
    font-weight: bold;
    color: #39393a;
   }

.Position{
    color: #313131;
}

/*Iconbox*/
.Iconbox{
    display: block;
    width: 260px;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;

}

.Iconbox img{
    max-width: 260px;
}


.Referenzen {
    margin-left: 20px;
}

.ReferenzenBildlink {
    display: block; 
    float: left;
    margin-right: 25px; 
    margin-bottom: 20px;
}



.autogalerie .topview
{
    display: block;
    width: 700px;
    
}

.autogalerie a
{
    text-decoration: none;
}

.autogalerie .grossbildHolder
{
	height: 415px;
	/* width: 400px; */
	text-align: center;
	display: block;
	background-position: center center;
	background-repeat: no-repeat;
	
	
}

.autogalerie .trennstrich
{
	height: 1px; 
	background-color: #fff;
}

.autogalerie .laufleiste
{
	height: 100px;
	padding-top: 2px;
	background-image:url('img/content/PhotogalerieVerlauf.png');
	background-position: center center;
	background-repeat: no-repeat;
	

}

.autogalerie .laufleiste ul li
{
	display: block;
	 height: 95px; 
	color: #000;
	cursor: pointer;
	
}




.DankeKontakt
{
	display: block; 
	width: 100%;
	height: 492px;
	background-image: url('img/content/Hintergrund_Kontakt.jpg');
	background-position: top center;
	background-repeat: no-repeat;
	position: static;
	text-align: left;
}

.DankeKontakt #dankeTitel
{
	padding-top: 100px;
	padding-left: 100px;
	font-size: 14px;
	font-weight: bold;
	text-align: left;
}

.DankeKontakt #dankeText
{
	font-size: 13px;
	text-align: left;
	padding-left: 100px;
}


.ProvenExpertRating {
    text-align: center;
    width: 254px;
}


.cright .Kontaktbox {
    margin-top: 40px;
}

.cright .Kontaktbox .KontaktboxText {
    color: #8b8b8b;
    text-align: justify;
    padding: 30px 30px 30px 30px;
}

.cright .Kontaktbox .KontaktboxText h2 {
    padding: 0px;
    margin: 0px;
    margin-bottom: 10px;
}

.cright .Kontaktbox .Kontaktbutton {
    list-style: none;
    text-align: center;
    margin: 10px auto;
    width: 250px;
    
}
.cright .Kontaktbox .Kontaktbutton a, .cright .Kontaktbox .Kontaktbutton a:hover, .cright .Kontaktbox .Kontaktbutton a:visited, .cright .Kontaktbox .Kontaktbutton a:active {
    color: white !important;
    text-decoration: none;
    cursor: pointer;
    padding: 10px 20px 10px 20px;
    background-color: #8b8b8b;
    text-transform: uppercase;
}

.cright .Kontaktbox h2 {
    margin-top: 0px;
}

.cright .Bigbutton {
     margin-top: 20px;
}

.cright .Bigbutton .BigbuttonText, .cright .Bigbutton a {
    font-size: 30px;
    font-weight: 500;
    color: white !important;
    text-transform: uppercase;
    text-align: center;
    padding-top: 20px;
    display: block;
}

.cright .Bigbutton .BigbuttonText strong {
    font-weight: 700;
    color: white !important;
}



.Startbutton {
    list-style: none;
    text-align: left;
    margin-top: 20px;
    margin-left: 0px;
    width: 300px;
    
}
.Startbutton a, .Startbutton a:hover, .Startbutton a:visited, .Startbutton a:active {
    color: white !important;
    text-decoration: none;
    cursor: pointer;
    padding: 10px 20px 10px 20px;
    background-color: #8b8b8b;
    text-transform: uppercase;
    width: 300px;
    display: block;
    text-align: center;
}

.Contentbutton {
    list-style: none;
    text-align: center;
    margin-top: 20px;
    margin-left: 0px;
   
}

.Contentbutton a, .Contentbutton a:hover, .Contentbutton a:visited, .Contentbutton a:active {
    color: white !important;
    text-decoration: none;
    cursor: pointer;
    padding: 10px 20px 10px 20px;
    background-color: #8b8b8b;
    text-transform: uppercase;
    width: 100%;
    display: block;
    text-align: center;
    margin: 20px auto;
    line-height: 40px;

}