:root {
    --schwarz: #000;
    --weiss: #fff;
    --hellgrau: #eee;
    --transparent: rgba(0,0,0,0);
    --box-shadow: rgba(0,0,0,0.5); /* CRM 50% Schwarz */

    --primaerfarbe: #fcdd09; /* #ffcc00; GELB Neustadt */
    --sekundaerfarbe: #da121a; /* #dd0b2f; ROT Neustadt */

    --schriftfarbe1: #000; /* Neustadt */

    --hintergrund1: #160a57; /* CRM satter Blauton */

    --hintergrund2: #999; /* CRM Kontaktformular Grau */
    --hintergrund3: rgba(256,256,256,0.7);
    
    --jo_green: #87bd24;
    
}


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

    /*    background-color: var(--hellgrau);*/
}


.clear{
    clear:both;
}

#fullscreen {
    display: none;
}
#mobile {
    display: block;
}


/*********************     Linkfarbe       **************************/

a {
    color: var(--primaerfarbe);
    text-decoration: none;
    transition: 0.35s color;
    font-weight:400;
}

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



/************** Tabelle / tabelle / table ******************/

tr:nth-child(even) {
    background-color: var(--hellgrau);
}

tr:nth-child(odd) {
    background-color: var(--weiss);
}

tr:nth-child(even) td,
tr:nth-child(odd) td {
    padding: 20px 35px 15px 35px;
}

table {
    border-spacing: 0px;
    border:1px solid var(--primaerfarbe);
    text-align: left;
    position: relative;
    width:100%;
}
table tr {
    display: flex;
    flex-flow:column;
    width:100%;
}

table td {
    width:100%;
}




table td p {
    margin:0;
}

table td img {

    width: auto;
    height:auto;
    max-width:100%;
    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;
}









/****** UP Button ******/

.scrollup {
    position: fixed;
    right: 50px;
    bottom: 85px;
    z-index: 10;
}

.scrollup p {
    margin:0;
}

.scrollup a {
    background-color: var(--box-shadow);
    background-image: url(/images/icons/up_24_yellow.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;
}

a.btn-info:hover {
    background-color: var(--schwarz);
    background-image: url(/images/icons/up_24_yellow.png);
    background-position: 100% 100%;
    transition: 0.35s background-position ease-in-out;
}

.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 {
    background-color: var(--schwarz);

}







/* * *    BUTTONS ENDE     * * */


/*********** SPALTEN ***************/

.blog-items {
/*    display: flex;
    width:100%;*/
}

/* 2-spaltig / 2 Spalten */

.blog-items.columns-2 .blog-item {
    /*width:50%;*/
}

#musikschule tr:nth-child(even) {
    background: var(--schwarz);
}





/* ENDE SPALTEN 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 *********************************/



/*************** HEADER - TOP *****************/

/*** Anker ***/
#header {
    float: left;
    width: 100%;
    position: relative;
}










/*** LOGO ***/


.navbar-brand {

    padding: 15px;

}

.logo{

}

.logo p {
    margin: 0;
}

.logo img {
    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:column;
}
.mainmenu ul li {
    white-space: nowrap;
}
.mainmenu ul li a {
    font-size: 18px;
    font-weight: 600;
    line-height: 33px;
    text-decoration: none;
    color:var(--schwarz);
}
.mainmenu ul li a.umbruch {
    white-space: normal;
}

.mainmenu ul li a img {
    max-width:100%;
    height: auto;
}

.mainmenu ul li a:hover,
.mainmenu ul li a:focus,
.mainmenu ul li.active a {
    background:var(--primaerfarbe);
}

.mainmenu ul li a.menu_logo:hover,
.mainmenu ul li a.menu_logo:focus,
.mainmenu ul li.active a.menu_logo {
    background:var(--transparent);
}


/* 2. Ebene */
/* 3. Ebene */

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






















/********************   Fehler    ****************************/


.alert h4 {
    color: inherit;
    float: left;
    margin: 0 15px 0 0;
    width: auto;
}

.alert-message {
    line-height: 25px;
}



/******** Slider CK (nicht Slideshow CK)*************/

.swiper-pagination-bullet-active {
    color:var(--primaerfarbe);
}

.swiper-pagination-bullet-active {
    background: var(--primaerfarbe);
}

span.icon-angle-double-left {
    content:url("/images/icons/first_page_black_24.png");
    width: 24px;
    height: 24px;
    display: block;
}
span.icon-angle-left {
    content:url("/images/icons/keyboard_arrow_left_black_24.png");
    width: 24px;
    height: 24px;
    display: block;
}
span.icon-angle-right{
    content:url("/images/icons/keyboard_arrow_right_black_24.png");
    width: 24px;
    height: 24px;
    display: block;
}

span.icon-angle-double-right {
    content:url("/images/icons/last_page_black_24.png");
    width: 24px;
    height: 24px;
    display: block;
}

/*

a[aria-label="Zur Seite"] span {
    content:url("/images/icons/keyboard_arrow_left_yellow_24.png");
}
a[aria-label="Zur Seite zurück wechseln"]:hover span {
    content:url("/images/icons/keyboard_arrow_left_black_24.png");
}

a[aria-label="Zur Seite start wechseln"] span {
    content:url("/images/icons/first_page_yellow_24.png");
}
a[aria-label="Zur Seite start wechseln"]:hover span {
    content:url("/images/icons/first_page_black_24.png");
}


a[aria-label="Zur Seite weiter wechseln"] span {
    content:url("/images/icons/keyboard_arrow_right_yellow_24.png");
}
a[aria-label="Zur Seite weiter wechseln"]:hover span {
    content:url("/images/icons/keyboard_arrow_right_black_24.png");
}

a[aria-label="Zur Seite ende wechseln"] span {
    content:url("/images/icons/last_page_yellow_24.png");
}
a[aria-label="Zur Seite ende wechseln"]:hover span {
    content:url("/images/icons/last_page_black_24.png");
}

*/

.pagination {

    font-size: 17px;
}

.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
    background-color: var(--primaerfarbe);
    border-color: var(--primaerfarbe);
    color:var(--schwarz);

}
.pagination > li > a, .pagination > li > span {
    color: var(--primaerfarbe);
}
.pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus {
    color:var(--schwarz);
}

/******** Pagination ********/







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

#redim-cookiehint-bottom {
    background: var(--primaerfarbe);
    
}
#redim-cookiehint {
    background: var(--primaerfarbe);
}
#redim-cookiehint .cookiehead .headline {
    color:var(--schwarz);
}
#redim-cookiehint .cookiecontent {
    color:var(--schwarz);   
}

#cookiehintsubmit {
    background: var(--jo_green) !important;
    
}

#cookiehintsubmit:hover,
#cookiehintsubmitno:hover {
    background: var(--schwarz) !important;
    
}
#cookiehintinfo a {
        font-weight: 900;

}



/*******************************************************************************/
/*                                                                             */
/*                                                                             */
/*                      @media (min-width: 450px)                              */
/*                                                                             */
/*                                                                             */
/*******************************************************************************/

@media (min-width: 450px) {




}/*ENDE @media (min-width: 450px) ENDE*/


/*******************************************************************************/
/*                                                                             */
/*                                                                             */
/*                      @media (min-width: 640px)                              */
/*                                                                             */
/*                                                                             */
/*******************************************************************************/

@media (min-width: 640px) {


    .scrollup {
        bottom: 30px;

    }/*ENDE @media (min-width: 600px) ENDE*/
}
    /*******************************************************************************/
    /*                                                                             */
    /*                                                                             */
    /*                      @media (min-width: 767px)                              */
    /*                                                                             */
    /*                                                                             */
    /*******************************************************************************/

    @media (min-width: 767px) {






        footer {
            margin-bottom: 0px;
        }



    }/*ENDE @media (min-width: 767px) ENDE*/




    /*******************************************************************************/
    /*                                                                             */
    /*                                                                             */
    /*                      @media (min-width: 990px)                              */
    /*                                                                             */
    /*                                                                             */
    /*******************************************************************************/


    @media (min-width: 990px) {

        #fullscreen {
            display: block;
        }
        #mobile {
            display: none;
        }
        table tr {
            flex-flow:row;
        }



        #responsiv {
            display:none;
        }

        /***** Kontaktseite ******/




    } /*ENDE @media (min-width: 990px) ENDE*/



    /*******************************************************************************/
    /*                                                                             */
    /*                                                                             */
    /*                      @media (min-width: 1200px)   				           */
    /*                                                                             */
    /*                                                                             */
    /*******************************************************************************/

    @media (min-width: 1400px) {
        .container {
            width: 1350px;

        }
    }