:root {
    --schwarz: #000;
    --weiss: #fff;
    --hellgrau: #eee;
    --grau: #666;
    --transparent: rgba(0,0,0,0);
    --box-shadow: rgba(0,0,0,0.5); /* CRM 50% Schwarz */

    --primaerfarbe: #0E3F75; /* Letzte: #344882, #004794, #525969 Stauch Taubenblau - Little Greene Original: #525969 gesättigt(25%) #4f586c heller 697080 */
    --sekundaerfarbe: #D9CEBF; /* Letzte: #E0D5C5, #d4c59c   Stauch Clay - Little Greene */

    --schriftfarbe1: #777; /*Stauch Taubenblau - Little Greene Original */

    --red: #bd2520; /* Stauch Atomic Rot (Vorschlag) */
    --hintergrund1: #0E3F75;/* Stauch Blau heller und satter#5a7ca3  #3d4f89 #4c5d89*/
    --hintergrund2: rgba(256,256,256,0.7);
    --hintergrund3: rgba(256,256,256,0.7);
}


/* Schriftart */

/* open-sans-300 - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/open-sans-v34-latin-300.eot'); /* IE9 Compat Modes */
    src: local(''),
        url('../fonts/open-sans-v34-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('../fonts/open-sans-v34-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
        url('../fonts/open-sans-v34-latin-300.woff') format('woff'), /* Modern Browsers */
        url('../fonts/open-sans-v34-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
        url('../fonts/open-sans-v34-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-regular - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/open-sans-v34-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
        url('../fonts/open-sans-v34-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('../fonts/open-sans-v34-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
        url('../fonts/open-sans-v34-latin-regular.woff') format('woff'), /* Modern Browsers */
        url('../fonts/open-sans-v34-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
        url('../fonts/open-sans-v34-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-600 - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/open-sans-v34-latin-600.eot'); /* IE9 Compat Modes */
    src: local(''),
        url('../fonts/open-sans-v34-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('../fonts/open-sans-v34-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
        url('../fonts/open-sans-v34-latin-600.woff') format('woff'), /* Modern Browsers */
        url('../fonts/open-sans-v34-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
        url('../fonts/open-sans-v34-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-800 - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 800;
    src: url('../fonts/open-sans-v34-latin-800.eot'); /* IE9 Compat Modes */
    src: local(''),
        url('../fonts/open-sans-v34-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('../fonts/open-sans-v34-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
        url('../fonts/open-sans-v34-latin-800.woff') format('woff'), /* Modern Browsers */
        url('../fonts/open-sans-v34-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
        url('../fonts/open-sans-v34-latin-800.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-300italic - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 300;
    src: url('../fonts/open-sans-v34-latin-300italic.eot'); /* IE9 Compat Modes */
    src: local(''),
        url('../fonts/open-sans-v34-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('../fonts/open-sans-v34-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
        url('../fonts/open-sans-v34-latin-300italic.woff') format('woff'), /* Modern Browsers */
        url('../fonts/open-sans-v34-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
        url('../fonts/open-sans-v34-latin-300italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-italic - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 400;
    src: url('../fonts/open-sans-v34-latin-italic.eot'); /* IE9 Compat Modes */
    src: local(''),
        url('../fonts/open-sans-v34-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('../fonts/open-sans-v34-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
        url('../fonts/open-sans-v34-latin-italic.woff') format('woff'), /* Modern Browsers */
        url('../fonts/open-sans-v34-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
        url('../fonts/open-sans-v34-latin-italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-600italic - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 600;
    src: url('../fonts/open-sans-v34-latin-600italic.eot'); /* IE9 Compat Modes */
    src: local(''),
        url('../fonts/open-sans-v34-latin-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('../fonts/open-sans-v34-latin-600italic.woff2') format('woff2'), /* Super Modern Browsers */
        url('../fonts/open-sans-v34-latin-600italic.woff') format('woff'), /* Modern Browsers */
        url('../fonts/open-sans-v34-latin-600italic.ttf') format('truetype'), /* Safari, Android, iOS */
        url('../fonts/open-sans-v34-latin-600italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-800italic - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 800;
    src: url('../fonts/open-sans-v34-latin-800italic.eot'); /* IE9 Compat Modes */
    src: local(''),
        url('../fonts/open-sans-v34-latin-800italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('../fonts/open-sans-v34-latin-800italic.woff2') format('woff2'), /* Super Modern Browsers */
        url('../fonts/open-sans-v34-latin-800italic.woff') format('woff'), /* Modern Browsers */
        url('../fonts/open-sans-v34-latin-800italic.ttf') format('truetype'), /* Safari, Android, iOS */
        url('../fonts/open-sans-v34-latin-800italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}

html, body {
    height:100%;
    margin:0;
    padding:0;
    text-align:left;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;

    color: var(--schriftfarbe1);

    font-size: 18px;

    line-height: 28px;
    scroll-behavior: smooth;
}


.clear{
    clear:both;
}

.fullscreen {
    display: none;
}
.mobile {
    display: block;
}


/*********************     Linkfarbe       **************************/

a {
    color: var(--hintergrund1);
    text-decoration: none;
    transition: 0.35s color;
    font-weight:900;
}

a:hover, a:focus {
    color:var(--sekundaerfarbe);
    text-decoration: none;
    background: none;
    transition: 0.35s color;
}

content a {
    /*    font-weight: 600;*/
}

img {
    max-width: 100%;
    height:auto;
}


/* ***************        Aufzählung         **************** */

ul {
    padding-left:20px;
}


/************** Tabelle / tabelle / table ******************/

table {
    border-spacing: 0px;
    border:1px solid var(--primaerfarbe);
    text-align: left;
    position: relative;
    width:100%;
}

table h3 {
    margin-left: -35px;
}

table tbody,
table tbody tr
{
    display: flex;
    flex-flow: column;
}
table tbody tr td {
        padding: 5px 15px 5px 20px;
        width:100%
    }



tr:nth-child(even) {
    background-color: var(--hellgrau);
}

tr:nth-child(odd) {
    background-color: var(--weiss);
}

tr:nth-child(even) td:nth-child(1),
tr:nth-child(odd) td:nth-child(1)
 {
    max-width: 130px;
}
table.leistungen tr:nth-child(even) td:nth-child(1),
table.leistungen tr:nth-child(odd) td:nth-child(1)
 {
    max-width: 400px;
}
table.leistungen td {
    display: flex;
    align-items: center;
}



table td p {
    margin:0;
}

table td img {
    /*max-height:30px;*/
    width: auto;
    height:auto;
    position: relative;
}

/* table mit class product*/

table.product td img {

    max-height:100%;
    width:100%;

}


table.product tr:nth-child(even) td {
    padding: 0 20px;
}

table.product tr:nth-child(odd) td {
    padding:20px 35px 15px 35px;
}

/* ENDE tabelle ENDE */


/* List Style / list-style */






/* List Style ENDE */



/************************************************************************/
/*      								*/
/*                          BUTTONS             			*/
/*									*/
/************************************************************************/

/* Buttons */

.btn-link:hover, .btn-link:focus {
    text-decoration:none;
    color:var(--sekundaerfarbe);
}

.btn-link {

    color: var(--primaerfarbe);
}



/*********************    READMORE BTN    **************************/


p.readmore {
    padding:0;
}

.readmore a {
    border: 1px solid;
    border-color: var(--primaerfarbe);
    color: var(--primaerfarbe);
    border-radius:15px;
    margin: 10px 0 30px;
    float:left;
}

.readmore a:hover {
    border:1px solid var(--sekundaerfarbe);
    color: var(--sekundaerfarbe);
}





/************************************* BUTTON *************************************/


#myBtn {
    display:none;
}

#responsiv .scrollup {
    float: left;
    position: fixed;
    right: 20px;
    bottom: 73px;

}



.btn {
    display: inline;
}

.btn-info {
    background-color: #7297ce;
    border-color: #7297ce;
}

.btn-info a {
    transition: 0.2s;
}

.btn-info a:hover {
    background:#008C4A;
}





/****** UP Button ******/

.scrollup {
    position: fixed;
    right: 25px;
    bottom: 95px;
    z-index: 10;
}

.scrollup p {
    margin: 0;
}


a.btn-info {
    background-color: var(--box-shadow);
    background-image: url(/images/icons/up_24_white.png);
    background-position: 100% 0%;
    width: 24px;
    height: 24px;
    position: relative;
    display: inline-block;
    transition: 0.35s background-position ease-in-out;
    padding: 0;
    border: 0;
    border-radius: 15px;
}

.btn-info:active, .btn-info.active, .open > .dropdown-toggle.btn-info,
.btn-info:focus, .btn-info.focus,
.btn-info:active:hover, .btn-info.active:hover, .open > .dropdown-toggle.btn-info:hover, .btn-info:active:focus, .btn-info.active:focus, .open > .dropdown-toggle.btn-info:focus, .btn-info:active.focus, .btn-info.active.focus, .open > .dropdown-toggle.btn-info.focus
{
    color: #fff;
    background-color: var(--sekundaerfarbe);
    border-color: var(--weiss);
}

a.btn-info:hover {
    background-color: var(--sekundaerfarbe);
    background-image: url(/images/icons/up_24_white.png);
    background-position: 100% 100%;
    transition: 0.35s background-position ease-in-out;
}






/* * *    BUTTONS ENDE     * * */







/********************************* SEARCH **********************************************/


.search {
    padding:2px 0 2px;

}


.search input {
    border-radius: 5px;
    padding: 1px 5px;
    border-color: transparent;
    background-color: var(--hellgrau);
    min-width:350px;

}










/*************** HEADER - BILD / MODUL JE Camera Slideshow  *****************/

/* ausgelagert */

/* JE_Camera_Slideshow */


.ui.blue.button, .ui.blue.buttons .button {
    color: var(--primaerfarbe);
    background-color: var(--hintergrund3);
    border: none;
    font-size: 24px;
    box-shadow: 0 0 3px var(--box-shadow);

}

.ui.blue.button:hover, .ui.blue.buttons .button:hover,
.ui.blue.button:focus, .ui.blue.buttons .button:focus {
    color: var(--sekundaerfarbe);
    border: none;
    background-color: var(--hintergrund2);
}








/********************************* HEADER *********************************/



/*************** HEADER - TOP *****************/

/*** Anker ***/
#header {
    float: left;
    width: 100%;
    position: relative;
}










/*** LOGO ***/


.navbar-brand {

    padding: 15px;

}

.logo{

}

.logo p {
    margin: 0;
}

.logo img {
    max-width:100%;
    height:auto;
}

.logo-response{
    display: block;
}
.logo-response p {
    margin:0;
}
.logo-response img {
    height:60px;
    width: auto;
    padding: 5px;
}

.logo-response .navbar-brand {
    padding:0;
}





/*************************** MAIN MENU / mainmenu ************************************/

.nav > li > a {
    color: var(--primaerfarbe);
    text-decoration: none;
}

.nav > li > a:hover, .nav > li > a:focus {
    background: none;
    color: var(--sekundaerfarbe);
    text-decoration: none;
}


.mainmenu {

}
.mainmenu ul {
    display: flex;
    flex-flow:row;
}
.mainmenu ul li {
    white-space: nowrap;
    margin:0;
}
.mainmenu ul li a {
    font-size: 18px;
    font-weight: 600;
    line-height: 33px;
    text-decoration: none;
    color: var(--weiss);
    display: flex;
    flex-flow: column;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding: 25px 15px;
}

.mainmenu ul li:hover>a {
    text-shadow: 0 0 0.5px #fff, 0 0 0.5px #fff;
}

.mainmenu ul li a:after {
    border-color: transparent transparent var(--hellgrau) transparent;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    bottom: 0;
    content: "";
    height: 0;
    left: 50%;
    margin-left: -10px;
    opacity: 0;
    position: absolute;
    -webkit-transform: rotate(1turn);
    -webkit-transition: opacity .1s linear;
    transition: opacity .1s linear;
    width: 0;
}


.mainmenu ul li:hover a:after,
.mainmenu ul li.active a:after{
    opacity: 1!important;
}




.mainmenu ul li a:hover,
.mainmenu ul li a:focus,
.mainmenu ul li.active a {
    color: var(--weiss);
}







/* 2. Ebene */
.mainmenu ul ul {
    display: none;
    position: absolute;
    background: var(--weiss);
    padding: 10px 0;
    box-shadow: 0px 2px 16px 0px var(--box-shadow);
}

.mainmenu ul li:hover ul {
    display: block;
}

.mainmenu ul ul li {
    float: none;
    width: 100%;
}




.mainmenu ul ul li a {
    padding: 3px 30px 3px 20px;
    font-weight: 400;
    font-size: 20px;
    color: var(--primaerfarbe);
}

.mainmenu ul li.active li a {
    color: var(--primaerfarbe);
}

.mainmenu ul li.active li a:hover,
.mainmenu ul li.active li a:focus,
.mainmenu ul li.active li.active a,
.mainmenu ul li.active li.current a {
    /*    color: var(--sekundaerfarbe);*/
}


/* Parent Symbil */

.mainmenu ul ul li.parent {

    background-image: url(/images/icons/navigation_submenu.png);
    background-size: 8px;
    background-position: 90% center;
    background-repeat: no-repeat;
    margin-right:24px;

}

.mainmenu ul ul li.parent:hover,
.mainmenu ul ul li.parent.active
{

    background-image: url(/images/icons/navigation_submenu_active.png);
}


/* 3. Ebene */

.mainmenu ul ul ul,
.mainmenu ul li:hover ul ul {
    display: none;
    left: 100%;
    box-shadow: 0px 2px 16px 0px var(--box-shadow);
    background-color: var(--weiss);
    margin: -46px 0 0 0;
    min-width: 250px;
    position: absolute;
}
.mainmenu ul ul li:hover ul {
    display: block;
}

.mainmenu ul ul ul li {
    float:left;
    width:100%;
}
.mainmenu ul ul ul li a {
    width:100%;
    float:left;
}

.mainmenu ul li.active li.active li a {
    color: var(--primaerfarbe);
}
.mainmenu ul li.active li.current li a:hover,
.mainmenu ul li.active li.current li a:focus,
.mainmenu ul li.active li.active li.current a {
    color: var(--sekundaerfarbe);
}

/* ENDE MAIN MENU ENDE */






/********************************** BREADCRUMB **********************************/

#startseite .hg_breadcrumb {
    display:none;
}

.breadcrumb {
    border-radius:0;
    background-color: var(--transparent);
    margin:35px 0 0;
    padding:0;
}

ol.breadcrumb li:nth-child(2)::before{
    content:"";
}





/*************** Content *****************/


/* BLOG */

.blog-items {
    display: flex;
    width: 100%;
    flex-flow: column;
}

.blog-items .blog-item {
    background: var(--weiss);
    background: linear-gradient(180deg, rgba(255,255,255,1) 50%, rgba(255,255,255,0.2) 80%);
    margin: 35px 0;
    padding: 35px 25px;
    box-shadow: 0 -5px 10px var(--box-shadow);
}



/* Beitrag */

.com-content-article.item-page {
    background: var(--weiss);
    background: linear-gradient(180deg, rgba(255,255,255,1) 50%, rgba(255,255,255,0.2) 80%);
    margin: 35px 0;
    padding: 35px 25px;
    box-shadow: 0 -5px 10px var(--box-shadow);
}



/********************   Fehler    ****************************/


.alert h4 {
    color: inherit;
    float: left;
    margin: 0 15px 0 0;
    width: auto;
}

.alert-message {
    line-height: 25px;
}





/******************************    BeitrÃ¤ge    *****************************************/






/**************************** FOOTER ******************************************/



footer {
    display: block;
    float: left;
    position: relative;
    width: 100%;
    margin-bottom: 60px;

}







/* Footer Navigation */


/*** Copyright ***/

.copyright{
    margin: 0 auto;
    text-align:center;
    font-size: 10px;
    width: 100%;
    float: left;
    margin-bottom: 0px;
    color: var(--weiss);
}




.copyright p{

    margin-top: 4px;
    margin-bottom: 8px;
}

.copyright img {

    height: 25px;
    padding: 0 3px;

}



/******            COOKIE HINT               ******/



/*******************************************************************************/
/*                                                                             */
/*                                                                             */
/*                      @media (min-width: 450px)                              */
/*                                                                             */
/*                                                                             */
/*******************************************************************************/

@media (min-width: 450px) {




}/*ENDE @media (min-width: 450px) ENDE*/


/*******************************************************************************/
/*                                                                             */
/*                                                                             */
/*                      @media (min-width: 600px)                              */
/*                                                                             */
/*                                                                             */
/*******************************************************************************/

@media (min-width: 600px) {

    /* BLOG */


.com-content-category-blog.blog .blog-item {
    padding: 35px 50px;
}



/* Beitrag */

.com-content-article.item-page {
    padding: 35px 50px;
}

.scrollup {
    bottom: 41px;
    right: 50px;
    
}


}/*ENDE @media (min-width: 600px) ENDE*/

/*******************************************************************************/
/*                                                                             */
/*                                                                             */
/*                      @media (min-width: 767px)                              */
/*                                                                             */
/*                                                                             */
/*******************************************************************************/

@media (min-width: 767px) {

   
    
    .mainmenu ul li {
    
    margin:0 25px;;
}
    
    table tbody tr {
        flex-flow:row;
    }
    table tbody tr td {
        padding: 20px 35px 15px 35px;
    }

    footer {
        margin-bottom: 0px;
    }



}/*ENDE @media (min-width: 767px) ENDE*/




/*******************************************************************************/
/*                                                                             */
/*                                                                             */
/*                      @media (min-width: 990px)                              */
/*                                                                             */
/*                                                                             */
/*******************************************************************************/


@media (min-width: 990px) {

 .fullscreen {
        display: block;
    }
    .mobile {
        display: none;
    }



    #responsiv {
        display:none;
    }

    /***** Kontaktseite ******/

    #kontaktseite #jform_contact_name {
        width: 30%;
    }

    #kontaktseite #jform_contact_email{
        width: 30%;
    }

    #kontaktseite #jform_contact_emailmsg{
        width: 50%;
    }

    #kontaktseite #jform_contact_message{
        width: 50%;
    }


    .kontakt_info{
        width: 65%;
    }


} /*ENDE @media (min-width: 990px) ENDE*/



/*******************************************************************************/
/*                                                                             */
/*                                                                             */
/*                      @media (min-width: 1200px)   				           */
/*                                                                             */
/*                                                                             */
/*******************************************************************************/

@media (min-width: 1200px) {
    .container {
        /*width: 1400px;*/

    }


}

/*ENDE @media (min-width: 1160px) ENDE*/