/*****************************  HEADER   ****************************/
/*
header.sys.css

Verfügbare Platzhalter: 
rgb(255, 255, 255)
rgb(64, 145, 11)
#f0f1f2
rgb(68, 68, 68)
rgb(102, 102, 102)
rgb(153, 153, 153)
rgb(178, 212, 156)
rgb(64, 145, 11)
rgb(153, 153, 153)
rgb(102, 102, 102)
rgb(192, 165, 118)
rgb(167, 137, 67)
test
*/

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

.header {
    position: fixed;
    z-index: 97;
    /*border-left: solid 1px #f0f1f2;*/
}

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

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

.preheaderzeile {
    background-color:rgb(238, 238, 238); 
    height: 30px; 
    margin-top: 0px; 
    padding-top: 5px;
}


/*linksbündig: Zusatztext, Impressum und Datenschutz*/
#PreHeader .PreHeaderZusatzText {
    display: block;
    color: #000;
    float: left;
    margin-right: 10px;
    font-weight: normal;
}

#PreHeader .fullsize .PreHeaderZusatzText {
    margin-left: 20px;
}

@media (max-width: 300px) {
    #PreHeader {
        display: none;
        visibility: hidden;
    }
}

@media (max-width: 767px) {

    #PreHeader .PreHeaderZusatzText {
        font-size: 10px;
        white-space: nowrap;
	    overflow: hidden;
	    width: 80%;
	    text-overflow: ellipsis;
    }
}

@media (min-width: 767px) {

    #PreHeader {
        font-size: 12px;
        visibility: visible;
        display: block
    }
    
    #PreHeader .PreHeaderZusatzText {
    	width: 40%;
    	white-space: nowrap;
	    overflow: hidden;
	    text-overflow: ellipsis;
    }
}

@media (min-width: 992px) {
	#PreHeader .PreHeaderZusatzText {
    	max-width: 60%;	
    }
}

    #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: rgb(102, 102, 102);
}

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

#PreHeader .imgLnkBearbeiten, #PreHeader .imgLnkAdminbereich, #PreHeader .imgLnkReloadCSSFromSYS, #PreHeader .imgLnkLogs, #PreHeader .imgLnkCookie, #PreHeader .imgLnkAccount {
    padding-left: 3px;
    padding-right: 3px;
}

.cookie-consent {
    background-color: #fff;
    opacity: 1;
    color: #555;
    z-index: 98;
    position: static; /*fixed;*/
    padding: 10px;
    border-bottom: solid 2px silver;
}

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

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

    .cookie-consent #consent {
        color: #000;
        padding: 2px 10px 2px 10px;
        display: block;
        margin: 0px 10px 0px 10px;
       
    }

    .cookie-consent .navbar-nav {
        float: right;
    }

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

.adminlinkbar {
    padding: 10px;
    background-color: #fff;
    opacity: 0.9;
    border: solid 1px silver;
    box-shadow: 5px 5px 5px silver;
    border-radius: 10px 10px 10px 10px;
    float: right;
    min-height: 20px;
    top: 5px;
    z-index: 99;
    position: fixed; /*statt relative*/
    display: block;
    right: 10px;
}




/*Telefon, Mail und Kontaktbutton, sofern genug Platz ist. */
.email {
    padding-left: 0px;
    text-align: right;
    padding-right: 0px;
    display: inline;
    float: right;
    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: right;
    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: right;
}

.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: hidden;
        display: none;
    }

}

@media (min-width: 992px) {
	.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
*/

.navbar {
    border-width: 0px;
}

.navbar-default {
    border-color: white /*!important*/;
    background-color: transparent;
}

.mainHead, #mainNav {
    
    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;*/
    z-index: 97 !important;
}




.mainHead {
}

.farbverlauf {
    /*
        FARBVERLÄUFE
        =======================================

        background: -webkit-gradient(
          linear, <point1>, <point2>, from(<color>), color-stop(<color stop>), to(<color>)
        );

        background: -webkit-linear-gradient(<direction or angle>, <color stop>, <color stop>);
        background: -moz-linear-gradient(<direction or angle>, <color stop>, <color stop>);
        background: -o-linear-gradient(<direction or angle>, <color stop>, <color stop>);
        background: -ms-linear-gradient(<direction or angle>, <color stop>, <color stop>);

        background: linear-gradient(<to direction> or <angle>, <color stop>, <color stop>);


        Beispiel mit Gradzahlen
        background: -webkit-linear-gradient(-45deg, #fff, #000);
        background: -moz-linear-gradient(-45deg, #fff, #000);
        background: -o-linear-gradient(-45deg, #fff, #000);
        background: -ms-linear-gradient(-45deg, #fff, #000);
        background: linear-gradient(-45deg, #fff, #000);

        Beispiel linear
        background: -webkit-gradient(left top, right top, #88B2F8, white);
        background-image: -moz-linear-gradient(to left, white, #88B2F8);
        background-image: -ms-linear-gradient(to left, white, #88B2F8);
        background-image: -o-linear-gradient(to left, white, #88B2F8);
        background-image: linear-gradient(to left, white, #88B2F8);

        Quelle: www.the-art-of-web.com/css/linear-gradients/
    */
    background: -webkit-gradient(42deg, #fff 3%, transparent 10%, #3986dd 40%);
    background: linear-gradient(42deg, #fff 3%, transparent 10%, #3986dd 40%);
    background: -moz-linear-gradient(42deg, #fff 3%, transparent 10%, #3986dd 40%);
    background: -ms-linear-gradient(42deg, #fff 3%, transparent 10%, #3986dd 40%);
    background: -o-linear-gradient(42deg, #fff 3%, transparent 10%, #3986dd 40%);
}

.headergrafik {
    padding: 0px;
    margin: 0px;
    border-width: 0px;
    height: 100%;
    width: 100%;
    background-position: right bottom;
    background-repeat: no-repeat;
}


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

    .mainHeadMiddle.affix {
        /*padding: 0px 0px 0px 0px;*/
        padding-top: 0.2em !important;
        padding-bottom: 0.2em !important;
        -webkit-transition: padding 0.2s linear;
        -moz-transition: padding 0.2s linear;
        -o-transition: padding 0.2s linear;
        transition: padding 0.2s linear;
       
    }

    



}


/*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 {
        /*height: 120px;*/
        background-color: transparent;
    }
}


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

*/

.navbar-header .navbar-brand {
    margin-right: 40px;
    margin-left: 40px;
    padding: 5px 0px !important;
    display: block;
    background-repeat: no-repeat;
    background-position: left center;
    background-color: transparent;
    background-size: cover;
    float: left;
}

.affix .navbar-header .navbar-brand{
	
	/*background-image: url('http://localhost/mediaapp/UserData/ECMS_3FACH-ANDERS/UploadArea/image/BenutzerBilder/profil/LOGO.jpg');*/
}



/*  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 {
            margin-left: 0px !important;
            margin-right: 0px !important;
            margin-top: 8px;
            /*width: 60px;*/
            /*display: none; visibility: hidden;*/
        }
}

@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: 700;
    text-shadow: #848484 1px 1px 1px;
    display: flex;
    padding-right: 15px;
    margin: 5px 0px 2px 10px;  
    color: rgb(102, 102, 102);
    /*color: #363636;*/
}

.Firmentext {
    
    margin-left: 10px;
    display: flex;
    margin-top: 0px;
    margin-bottom: 5px;
    color: rgb(102, 102, 102);
    /*color: #8b8b8b;*/
}

/*Für jede Ansicht ist die Schriftgröße etwas unterschiedlich*/
@media (max-width: 350px) {
    .Firmentext {
        display: none;
        visibility: hidden;
    }
}


    @media (max-width: 767px) {
        .Firmenname {
            letter-spacing: 1px;
            font-size: 16px;
            width: auto;
            margin-top: 10px;
            display: none;
            visibility: hidden;
        }

        .Firmentext {
            font-size: 12px;
            padding-top: 5px;
            padding-left: 3px;
            width: 125px;
        }
    }

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

        .Firmentext {
            font-size: 16px;
        }
    }

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

        .Firmentext {
            font-size: 22px;
        }
    }


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

        .Firmentext {
            font-size: 25px;
        }
    }

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

    #headermenuleistennavbar {
        /*padding-left: 15px;*/
        float: right;    
        margin-top: 50px;
    }
    
    /*  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-toggler-Button mit float right eingeblendet.
    */
        .navbar-custom .navbar-toggler {
            color: white;
            text-transform: uppercase;
            font-size: 12px;
            border-color: white;
            background-color: #ddd !important; /*ddd*/
            float: right;
            padding: 10px;
            margin-top: 15px;
        }

            .navbar-custom .navbar-toggler:hover,
            .navbar-custom .navbar-toggler:focus {
                background-color: #d8cc76; /*#f8f8f8*/
                color: gray;
                border-color: gray;
            }

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

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

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

        /*Falls das Header-interne Menü gewählt ist*/
        .headermenuleiste {
            border-left: #f0f1f2 1px silver;
            box-shadow: silver 0px 2px 4px;
            position: absolute;
            right: 20px;
            opacity: 0.9;
            
        }


        /*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;
            font-size: 14px;
            padding: 10px;
        }


        /*Naviblock-Menü*/
        /*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;
        }


        /*Headermenü*/
        /*Der normale Menü-Button*/
        .navbar-default .navbar-nav > li > a {
            color: #848484;
            background-color: transparent;
            background-color: transparent;
            width: 100%;
            height: 100%;
            display: block;
            text-decoration: none;
        }

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

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

/*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: 0px;
        visibility: hidden;
    }

    /*-- Präsentationsleiste oben --*/

    /*
        FARBVERLÄUFE
        =======================================

        background: -webkit-gradient(
          linear, <point1>, <point2>, from(<color>), color-stop(<color stop>), to(<color>)
        );

        background: -webkit-linear-gradient(<direction or angle>, <color stop>, <color stop>);
        background: -moz-linear-gradient(<direction or angle>, <color stop>, <color stop>);
        background: -o-linear-gradient(<direction or angle>, <color stop>, <color stop>);
        background: -ms-linear-gradient(<direction or angle>, <color stop>, <color stop>);

        background: linear-gradient(<to direction> or <angle>, <color stop>, <color stop>);


        Beispiel mit Gradzahlen
        background: -webkit-linear-gradient(-45deg, #fff, #000);
        background: -moz-linear-gradient(-45deg, #fff, #000);
        background: -o-linear-gradient(-45deg, #fff, #000);
        background: -ms-linear-gradient(-45deg, #fff, #000);
        background: linear-gradient(-45deg, #fff, #000);

        Beispiel linear
        background: -webkit-gradient(left top, right top, #88B2F8, white);
        background-image: -moz-linear-gradient(to left, white, #88B2F8);
        background-image: -ms-linear-gradient(to left, white, #88B2F8);
        background-image: -o-linear-gradient(to left, white, #88B2F8);
        background-image: linear-gradient(to left, white, #88B2F8);

        Quelle: www.the-art-of-web.com/css/linear-gradients/
    */
    .Menuleiste {
        font-family: 'HelveticaNeue-Bold','Helvetica Neue','Arial',sans-serif;
        font-size: 12px;
        font-weight: 600;
        line-height: 23px;
        /*background-image: url('../../img/theme/grau-gold/menuHG.jpg');
        background-position: center center;
        background-repeat: repeat-x;
        */
        background: -webkit-gradient(rgb(153, 153, 153) 50%, rgb(102, 102, 102) 50%);
        background: -moz-linear-gradient(rgb(153, 153, 153) 50%, rgb(102, 102, 102) 50%);
        background: -ms-linear-gradient(rgb(153, 153, 153) 50%, rgb(102, 102, 102) 50%);
        background: -o-linear-gradient(rgb(153, 153, 153) 50%, rgb(102, 102, 102) 50%);
        background: linear-gradient(rgb(153, 153, 153) 50%, rgb(102, 102, 102) 50%);
        height: 30px;
        width: 100%;
        box-shadow: 0px 5px 5px silver;
        padding: 0px;
    }

    .headermenuleiste {
        font-family: 'HelveticaNeue-Bold','Helvetica Neue','Arial',sans-serif;
        font-size: 14px;
        font-weight: 600;
        line-height: 23px;
        /*padding-top: 10px;*/
        float: left;
        /*padding-left: 120px;*/
        max-width: 270px;
    }

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

    .navbar-header {
        width: 95% !important;
    }

    #headermenuleistennavbar {
        margin-top: 5px;
        /*padding-left: 15px;*/
        float: right;
        -webkit-transition: margin 0.2s linear;
        -moz-transition: margin 0.2s linear;
        -o-transition: margin 0.2s linear;
        transition: margin 0.2s linear;
    }

    .affix #headermenuleistennavbar {
        margin-top: 0px;
        -webkit-transition: margin 0.2s linear;
        -moz-transition: margin 0.2s linear;
        -o-transition: margin 0.2s linear;
        transition: margin 0.2s linear;
    }

    .navbar-custom .headermenuleiste li a {
        text-decoration: none;
        /*text-transform: uppercase;*/
        padding-left: 0px;
        padding-right: 16px;
        padding-top: 5px;
        display: block;
        float: left;
        height: 30px;
        background-color: transparent;
        color: rgb(178, 212, 156);
        text-shadow: none /*1px 2px 2px #000*/;
    }
    
    .affix .navbar-custom .headermenuleiste li a {
        text-decoration: none;
        /*text-transform: uppercase;*/
        padding-left: 0px;
        padding-right: 16px;
        padding-top: 5px;
        display: block;
        float: left;
        height: 30px;
        background-color: transparent;
        color: rgb(178, 212, 156);
        text-shadow none;
    }

    .navbar-custom .naviblock li a {
        text-decoration: none;
        /*text-transform: uppercase;*/
        padding-left: 8px;
        padding-right: 8px;
        padding-top: 5px;
        display: block;
        float: left;
        height: 30px;
        color: rgb(178, 212, 156);
    }

    .navbar-custom .headermenuleiste li a:hover {
        font-weight: bold;
        color: rgb(64, 145, 11);
    }

    .navbar-custom .naviblock li a:hover {
        /*background-image: url('../../img/theme/grau-gold/menuAktiv.jpg');*/
        background: -webkit-gradient(rgb(192, 165, 118) 50%, rgb(167, 137, 67) 50%);
        background: -moz-linear-gradient(rgb(192, 165, 118) 50%, rgb(167, 137, 67) 50%);
        background: -ms-linear-gradient(rgb(192, 165, 118) 50%, rgb(167, 137, 67) 50%);
        background: -o-linear-gradient(rgb(192, 165, 118) 50%, rgb(167, 137, 67) 50%);
        background: linear-gradient(rgb(192, 165, 118) 50%, rgb(167, 137, 67) 50%);
        color: rgb(64, 145, 11);
        /*background-position: center center;
        background-repeat: repeat;*/
    }

    .navbar-custom .headermenuleiste .akt {
        color: rgb(64, 145, 11);
    }

    /*Der Menübutton der aktuellen Content-Seite*/
    .navbar-custom .naviblock .akt, .navbar-custom .naviblock .active {
        background: -webkit-gradient(rgb(192, 165, 118) 50%, rgb(167, 137, 67) 50%);
        background: -moz-linear-gradient(rgb(192, 165, 118) 50%, rgb(167, 137, 67) 50%);
        background: -ms-linear-gradient(rgb(192, 165, 118) 50%, rgb(167, 137, 67) 50%);
        background: -o-linear-gradient(rgb(192, 165, 118) 50%, rgb(167, 137, 67) 50%);
        background: linear-gradient(rgb(192, 165, 118) 50%, rgb(167, 137, 67) 50%);
        color: rgb(64, 145, 11);
        /*background-image : url('../../img/theme/grau-gold/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 .Menuleiste .navbar-nav li.active a, .navbar-custom .Menuleiste .navbar-nav li a.active {
        background: -webkit-gradient(rgb(192, 165, 118) 50%, rgb(167, 137, 67) 50%);
        background: -moz-linear-gradient(rgb(192, 165, 118) 50%, rgb(167, 137, 67) 50%);
        background: -ms-linear-gradient(rgb(192, 165, 118) 50%, rgb(167, 137, 67) 50%);
        background: -o-linear-gradient(rgb(192, 165, 118) 50%, rgb(167, 137, 67) 50%);
        background: linear-gradient(rgb(192, 165, 118) 50%, rgb(167, 137, 67) 50%);
        color: rgb(64, 145, 11);
        /*background-image: url('../../img/theme/grau-gold/menuAktiv.jpg');
        background-repeat: repeat;
        background-position: center center;*/
    }

    .navbar-custom .headermenuleiste .navbar-nav li.active a {
        background-color: transparent;
        color: rgb(64, 145, 11);
    }

    /*Fullpage-Menümodus*/
    .navbar-custom .headermenuleiste .navbar-nav li a.active {
        background-color: transparent;
        color: rgb(64, 145, 11);
    }

    /*Hover pp.*/
    .navbar-custom .Menuleiste .navbar-nav li.active a:hover,
    .navbar-custom .Menuleiste .navbar-nav li.active a:focus,
    .navbar-custom .Menuleiste .navbar-nav li.active a:active {
        background: -webkit-gradient(rgb(192, 165, 118) 50%, rgb(167, 137, 67) 50%);
        background: -moz-linear-gradient(rgb(192, 165, 118) 50%, rgb(167, 137, 67) 50%);
        background: -ms-linear-gradient(rgb(192, 165, 118) 50%, rgb(167, 137, 67) 50%);
        background: -o-linear-gradient(rgb(192, 165, 118) 50%, rgb(167, 137, 67) 50%);
        background: linear-gradient(rgb(192, 165, 118) 50%, rgb(167, 137, 67) 50%);
        /*background-image: url('../../img/theme/grau-gold/menuAktiv.jpg');
            background-repeat: repeat;
            background-position: center center;*/
    }

    .navbar-custom .headermenuleiste .navbar-nav li.active a:hover,
    .navbar-custom .headermenuleiste .navbar-nav li.active a:focus,
    .navbar-custom .headermenuleiste .navbar-nav li.active a:active
    {
        background-color: transparent;
        color: rgb(64, 145, 11);
    }

}

/*@media (min-width: 768px) {
    .headermenuleiste {
        width: 749px;
    }
}*/

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

    .headermenuleiste {
        font-family: 'HelveticaNeue-Bold','Helvetica Neue','Arial',sans-serif;
        font-size: 16px;
        /*width: 970px;*/
        max-width: 480px;
    }

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

    .navbar-custom .naviblock li a, .headermenuleistennavbar li a {
        padding-left: 0px;
        padding-right: 40px;
    }

    #headermenuleistennavbar {
        margin-top: 30px;
        /*padding-left: 15px;*/
        -webkit-transition: margin 0.2s linear;
        -moz-transition: margin 0.2s linear;
        -o-transition: margin 0.2s linear;
        transition: margin 0.2s linear;
    }

    .affix #headermenuleistennavbar {
        margin-top: 10px;
        -webkit-transition: margin 0.2s linear;
        -moz-transition: margin 0.2s linear;
        -o-transition: margin 0.2s linear;
        transition: margin 0.2s linear;
    }
}

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

    .headermenuleiste {
        font-family: 'HelveticaNeue-Bold','Helvetica Neue','Arial',sans-serif;
        font-size: 18px;
        /*width: 1170px;*/
        max-width: 80%;

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

    .navbar-custom .naviblock li a, .headermenuleistennavbar li a {
        padding-left: 0px;
        padding-right: 60px;
    }

    #headermenuleistennavbar {
        margin-top: 60px;
        /*padding-left: 15px;*/
        -webkit-transition: margin 0.2s linear;
        -moz-transition: margin 0.2s linear;
        -o-transition: margin 0.2s linear;
        transition: margin 0.2s linear;
    }

    .affix #headermenuleistennavbar {
        margin-top: 40px;
        -webkit-transition: margin 0.2s linear;
        -moz-transition: margin 0.2s linear;
        -o-transition: margin 0.2s linear;
        transition: margin 0.2s linear;
    }
}